关键词：
【中文标题】如何扩展/覆盖 Angular Material $mdDialog.show 中的默认选项？【英文标题】：How to extend/overwrite default options in Angular Material $mdDialog.show? 【发布时间】：2016-09-17 17:31:36 【问题描述】：TL;DR：我需要一种方法来使用提供程序（与任何其他 Angular 模块一样 - a random example）覆盖提供我的 Angular 材质（尤其是在材质对话框中）提供的默认选项。
我一直在寻找一种方法来自定义默认值options Angular Material Modal，但没有任何可用的结果。
就像我在其他插件/模块上使用的一样，这种方式可以使用provider 来实现。查看材料的核心 (1.0.8) 我试图使用这样的setDefaults 方法设置选项（假设我只想暂时禁用背景）：
app.config(['$mdDialogProvider', function($mdDialogProvider)
console.log($mdDialogProvider);
// ^ $get/addMethod/addPreset/setDefaults
var defaults =
options: function()
return
hasBackdrop: false
$mdDialogProvider.setDefaults(defaults);
]);
现在，当我检查 onComplete 回调上的选项时：
如您所见，hasBackdrop 选项已更新，但模式不再起作用，所以我想我遗漏了一些东西。
您知道如何以适当的方式扩展默认角度吗？
谢谢
UPDATE : 没有.setDefaults 活动的选项对象（de 初始状态）
注意：我从他们的核心 transformTemplate 复制并添加到我的默认对象中，但结果是相同的。我可以看到 DOM 更新了，控制台没有错误，但模式不可见。
【问题讨论】：
你能解释一下你最终想要达到的目标吗？制定任务，也许可以有一种更透明的方式来实现它然后修补原始服务 请检查我的更新。我只需要一种更新默认材质选项的方法。现在，假设我想删除所有模块的背景，我必须在每个show 显示实例上调用它，而不是添加 hasBackdrop: false 作为所有模式的全局选项
我现在明白了。在我看来，您可以通过创建一个模态工厂来实现这一点，该工厂将使用更新的属性包装角材料模态。我会尽力说明我的意思
我为此做了一种包装服务，但我很好奇是否可以使用似乎是 Angular 的“正确方法”的提供程序。我还将使用我的服务更新代码。无论如何，将其添加到答案中，它可以以比我更好的方式完成。
【参考方案1】：
当您想从第三方库更新现有功能时，您应该尝试使用装饰器模式并装饰服务方法。
Angular 在配置应用程序时提供了一种在providers 上使用decorators 的简洁方法：https://docs.angularjs.org/api/auto/service/$provide
$provide.decorator
$provide.decorator(name, decorator);使用 $injector 注册一个服务装饰器。服务装饰器拦截服务的创建，允许它覆盖或修改服务的行为。装饰器返回的对象可能是原始服务，也可能是替换或包装并委托给原始服务的新服务对象。
您可以为$mdDialogProvider 编写一个装饰器来扩展.show 方法的功能，并将扩展的options 对象传递给它，如下所示：
.config(function ($provide)
// Decorate the $mdDialog service using $provide.decorator
$provide.decorator("$mdDialog", function ($delegate)
// Get a handle of the show method
var methodHandle = $delegate.show;
function decorateDialogShow ()
var args = angular.extend(, arguments[0], hasBackdrop: false )
return methodHandle(args);
$delegate.show = decorateDialogShow;
return $delegate;
);
);
我创建了一个带有 hasBackdrop: false 工作示例的代码笔，因此在调用$mdDialog.show() 时不会显示背景：http://codepen.io/addi90/pen/RaXqRx
【讨论】：
对此的一个小提示：var args = angular.extend(, arguments[0], hasBackdrop: false )。我会更改顺序以确保模式特定选项将覆盖我的自定义默认值，因此将变为：var args = angular.extend(, hasBackdrop: false , arguments[0])。同样对于更简洁的代码，可以在变量中定义具有默认值的对象：D
同意。但这是对解决方案的优化:)
不错的解决方案！如果对话框是从Preset 创建的，也许您需要检查arguments[0]._options。【参考方案2】：
请在此处找到带有演示的 codepen：http://codepen.io/shershen08/pen/vGoQZd?editors=1010
服务的外观如下：
var dialogFactory = function($mdDialog)
var options = ;
return
create: function(conf)
var preset = $mdDialog.alert()._options; //get defaults
var newOptions = angular.extend(preset, conf, options);//extend with yours
$mdDialog.show(newOptions);
,
//toggle various props
setProp: function(prop, val)
options[prop] = val;
;
;
在控制器中你可以像这样使用它：
$scope.toggleBackdrop = function()
$scope.backdrop = !$scope.backdrop;
//here we change the state of the service internal var
dialogService.setProp('hasBackdrop', $scope.backdrop);
;
$scope.showDialogViaService = function(ev)
//here we fill in the needed params of the modal and pass to the service
var obj =
'title': 'title',
'content': 'content',
'ok':'Ok!'
;
dialogService.create(obj);
【讨论】：
有没有办法在 Angular 5 中轻松包装或扩展 Angular-material 指令？
】有没有办法在Angular5中轻松包装或扩展Angular-material指令？【英文标题】：IsthereawaytoeasilywraporextendAngular-materialdirectivesinAngular5?【发布时间】：2018-07-1105:16:17【问题描述】：我在angular5应用程序中到处使用angular-material库，但我不... 查看详情
Angular Material Snackbar 位置
】AngularMaterialSnackbar位置【英文标题】：AngularMaterialSnackbarposition【发布时间】：2020-10-2616:20:39【问题描述】：我想在我的标题下放置材料小吃栏（它的高度是60px）。问题是verticalPosition将snackbar放在顶部并覆盖标题。我试图添加... 查看详情
包装或扩展 angular-material 组件，允许将未知属性传递给子组件
】包装或扩展angular-material组件，允许将未知属性传递给子组件【英文标题】：Wraporextendangular-materialcomponentallowingpass-throughofunknownattributestochildcomponent【发布时间】：2018-10-2406:24:09【问题描述】：我们正在使用Angular5和材料设计，... 查看详情
Angular 2 Material - 如何居中进度微调器
】Angular2Material-如何居中进度微调器【英文标题】：Angular2Material-HowToCenterProgressSpinner【发布时间】：2017-05-1406:34:32【问题描述】：我已经从下面的链接实现了Angular2进度微调器https://github.com/angular/material2/tree/master/src/lib/progress-spin... 查看详情
如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
】如何有效地使用AngularMaterial自定义调色板颜色AngularMaterial【英文标题】：HowtouseAngularMaterialcustom-palettecolorseffectivelyAngularMaterial【发布时间】：2019-04-0423:20:01【问题描述】：我正在使用自定义材质调色板。使用其默认阴影、深色... 查看详情
Angular Material mat-spinner 自定义颜色
】AngularMaterialmat-spinner自定义颜色【英文标题】：AngularMaterialmat-spinnercustomcolor【发布时间】：2018-07-2422:59:06【问题描述】：有谁知道如何在AngularMaterial中更改mat-spinner颜色？覆盖css不起作用。我尝试在材质文件中更改颜色，但它... 查看详情
如何覆盖（覆盖）material-ui（React）中的类和样式
】如何覆盖（覆盖）material-ui（React）中的类和样式【英文标题】：Howtooverride(overwrite)classesandstylesinmaterial-ui(React)【发布时间】：2018-11-2216:40:03【问题描述】：我正在使用material-ui的1.2.1版，我正在尝试覆盖AppBar组件以使其透明。... 查看详情
如何使用 Angular-Material 获得全高侧导航
】如何使用Angular-Material获得全高侧导航【英文标题】：HowtogetafullheightsidenavwithAngular-Material【发布时间】：2014-12-2816:01:09【问题描述】：我正在使用Angular-Material并实现了SideNav菜单。当屏幕尺寸较小时，菜单被隐藏，当单击菜单... 查看详情
Angular Material：如何将 floatPlaceholder 设置为从不
】AngularMaterial：如何将floatPlaceholder设置为从不【英文标题】：AngularMaterial:howtosetfloatPlaceholdertonever【发布时间】：2018-01-0822:58:08【问题描述】：库：Angular材质(material2)我想使用MdInputContainer的floatPlaceholder指令，以便占位符/提示永... 查看详情
Angular 9 - 删除 Angular Material Stepper 上的默认图标（创建）
】Angular9-删除AngularMaterialStepper上的默认图标（创建）【英文标题】：Angular9-Removedefaulticon(create)onAngularMaterialStepper【发布时间】：2020-07-0715:07:31【问题描述】：我在使用Angular时遇到了这个烦人的问题：我通过添加到页面的provides... 查看详情
如何使用 Angular Material 构建 Ivy？
】如何使用AngularMaterial构建Ivy？【英文标题】：HowtobuildIvywithAngularMaterial?【发布时间】：2019-11-0901:00:37【问题描述】：我正在使用Ivy和AngularMaterial，但是当我运行ngbuild时，我在下面遇到了这个问题：ERRORinTriedtooverwriteD:/Subin/PROJEC... 查看详情
如何创建响应式（可变列数）Angular-Material 卡片网格
】如何创建响应式（可变列数）Angular-Material卡片网格【英文标题】：Howtocreatearesponsive(varyingcolumncount)Angular-Materialcardgrid【发布时间】：2016-03-2010:45:18【问题描述】：我正在尝试创建一个Angular-Material卡片网格，其行为有点像Bootstr... 查看详情
Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？
】Angular5/Material，如何在MatDialog中删除垂直滚动？【英文标题】：Angular5/Material,howtoremoveverticalscrollinMatDialog?【发布时间】：2018-10-0315:11:53【问题描述】：我正在尝试移除材质对话框中的垂直滚动。我正在尝试使用CSS.mat-dialog-contai... 查看详情
Angular 2 Material - 如何有条件地设置工具栏的颜色
】Angular2Material-如何有条件地设置工具栏的颜色【英文标题】：Angular2Material-howtosetthecolorofatoolbarconditionally【发布时间】：2017-07-2020:01:27【问题描述】：我正在使用AngularMaterialtoolbar，它可以有三种颜色：“primary”、“accent”或“... 查看详情
怎么评价angular推出的material，相比polymer如何
angular和polymer算是底层框架，material只是上层的一种组件实现方式，所以它们不太适合对比。换句话说，你用angular，polymer，甚至jQuery都能实现一套material的东西，只是各自的实现方式会有差异。说两者后期会整合的，不太看好，... 查看详情
如何使用样式组件覆盖material-ui css？
】如何使用样式组件覆盖material-uicss？【英文标题】：Howtooverridematerial-uicsswithstyledcomponent?【发布时间】：2021-09-1518:35:27【问题描述】：我还是ui-material的初学者。我想用styled-component自定义我自己的按钮组件。问题是根据按钮变... 查看详情
如何在 Material-UI 中使用 Box 组件覆盖按钮？
】如何在Material-UI中使用Box组件覆盖按钮？【英文标题】：HowtouseoverrideButtonusingBoxcomponentinMaterial-UI?【发布时间】：2020-07-1304:03:19【问题描述】：我一直在尝试在Material-UI中的Box组件上理解和编写代码。(https://material-ui.com/components/... 查看详情
如何从 angular-material2 对话框与其父级进行通信
】如何从angular-material2对话框与其父级进行通信【英文标题】：Howtocommunicatefromangular-material2dialogtoitsparent【发布时间】：2017-07-3117:54:59【问题描述】：我有一个Parent组件，它打开了一个angular-material2对话框。letdialogRef=this.dialog.open... 查看详情