扩展 Angular 组件（仅限装饰器）答案

【问题标题】：Extend Angular Component ( Only decorator)扩展 Angular 组件（仅限装饰器）
【发布时间】：2017-11-19 00:55:31
【问题描述】：

我正在尝试扩展 Angular Material 组件以提供自定义 CSS 。我希望使用相同的组件，但只需更改 CSS 。如果是主题，我可以更改属性，但我想更改组件中硬编码的样式。所以，我正在尝试扩展组件。这就是我所做的。

@Component({
    selector: 'my-tab-nav-bar',
    styles: [``]  // custom css here 
})
export class TabNavBarComponent extends MdTabNavBar {
}

由于未指定模板而失败。所以我也添加了模板。所以，我复制粘贴模板。

@Component({
    selector: 'my-tab-nav-bar',
    template: `<div class=\"mat-tab-links\"> 
              <ng-content></ng-content> 
             <md-ink-bar></md-ink-bar> </div> `,

    styles: [``]  // custom css here 
})
export class TabNavBarComponent extends MdTabNavBar {
}

现在的问题是它不知道什么是 md-ink-bar 并且它没有以 angular 导出。无论如何我可以扩展只是改变css。

【问题讨论】：

您不能添加自己的全局样式表来附加和覆盖内置样式吗？这样您就不必为了更改 CSS 而创建新组件。
是的。但是变化太多了，整个styles.scss文件都被!importantstyles填满了。我们将在许多项目中使用它，以为我只会扩展基础组件并拥有自己的组件。没想到会这么复杂
Angular Material 不应在其样式中使用任何 !important。如果它是最近加载的定义，您的样式不会自动否决它吗？
我添加了styles.scss，但它没有覆盖
样式的顺序很重要。如果您想覆盖材质 css 文件，请确保在应该覆盖材质样式的 .css 之前对其进行排序。

标签： angular angular-material2

【解决方案1】：

这是一种解决方法

我创建了一个新指令

@Directive({
    selector: '[myTabNavBar]',
})
export class TabNavBarDirective {
    @HostBinding('style.background-color')
    backgroundColor: string = 'yellow';
}

源代码来自How to add CSS to directive

在我的 HTML 中，

  <nav  
      myTabNavBar 
      md-tab-nav-bar 
      flex>

这暂时有效。但我仍然很好奇如何扩展组件样式。

【讨论】：

【解决方案2】：

这记录在 Angular Material 网站的指南部分（问题发布时可能不存在）：https://material.angular.io/guide/customizing-component-styles

听起来您的样式的问题是视图封装或特异性。

【讨论】：