【问题标题】:How to override template for angular material 2 datepicker如何覆盖角度材料 2 日期选择器的模板
【发布时间】:2018-09-24 03:22:57
【问题描述】:

我需要修改 Angular 2 材质日期选择器的模板。它的模板在 @angular/material/esm5/datepicker.es5.js 中定义的几个内部组件中声明。

我可以直接在节点包中修改模板,但是更新时会被覆盖。

我可以看到这可能的唯一两种方法是如果我动态修改模板(这真的可能吗?),或者如果我在本地复制整个角度材质节点包然后修改它(什么是最好的方法去做这个?)。想法?

【问题讨论】:

  • 您是否尝试创建一个新组件来扩展您要为其创建新模板的组件?如果这样做,您可以重用代码并制作自己的模板。
  • 我愿意,但该模板适用于我不直接使用的组件。为了给你更多的上下文,我使用了 MatDatepicker 组件。 MatDatepicker 组件使用内部组件 MatCalendar,其中包含我正在尝试修改的模板。
  • 所以扩展它们。使用 MatDatePicker 正在使用的相同模板文本,并将使用 MatCalendar 更改为使用 MyMatCalendar
  • 这个问题是 MatDatepicker 通过私有方法和属性引用 MatCalendar。所以这是不可能的。 (实际上,我弄错了类的名称。MatDatepicker 通过私有方法和属性使用 MatDatepickerContent,而 MatDatepickerContent 使用 MatCalendar。
  • 我最终只是在本地复制了角度材料日期选择器代码并直接对其进行了修改。现在我必须删除所有不需要的文件,这需要很长时间。我很欣赏这个建议,但在这种情况下它不起作用。至少我让它工作了:)

标签: angular typescript overriding angular-material angular2-template


【解决方案1】:

你有两种方法:

  1. 创建一个扩展材料日期选择器的新组件并分配您获得的模板
  2. 覆盖一些材质 css 规则以更改其外观和感觉

【讨论】:

  • 我不想只是改变它的外观和感觉,我想添加内容,所以听起来像从 mat-datepicker 扩展的自定义模板必须是要走的路。
  • 关于 1:请参阅我上面的最后一条评论。扩展不是一种选择。关于 2:CSS 不是这里的关注点。模板是关注点。
猜你喜欢
  • 2018-09-13
  • 1970-01-01
  • 2020-09-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-12
  • 1970-01-01
相关资源
最近更新 更多