扩展Angular组件（只有装饰器）

我想扩展Angular Material组件给自定义CSS。我希望使用相同的组件，但只是更改CSS。如果它的主题，我可以改变属性，但我想改变组件中硬编码的样式。所以，我试图扩展组件。这是我做的。扩展Angular组件（只有装饰器）

@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及其在角没有出口。无论如何，我可以扩展只是改变CSS。

来源

2017-06-16 Skeptor

难道你不能只添加你自己的全局样式表来追加和覆盖内置样式吗？这样你就不必为了改变CSS而创建一个新的组件。 – Raven

是的。但是有太多的变化，整个styles.scss文件都是用'！important'样式填充的。我们将在很多项目中使用它，我认为我只会扩展基本组件并拥有自己的组件。没想到会这么复杂 – Skeptor

Angular Material不应该在他们的风格中使用任何'！important'。如果它是最近加载的定义，你的样式不会自动否决它吗？ – Raven

这是一种变通方法

我创建了一个新的指令

@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>

这适用于时间存在。但我仍然很好奇扩展组件样式。

来源

2017-06-16 10:12:37 Skeptor

扩展Angular组件（只有装饰器）

回答

相关问题