Question

我正在尝试扩展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并且它没有以角度输出。无论如何我只能改变css。

Answer 1

这是一种解决方法

我创建了一个新指令

John
Bugs
Doe

来自How to add CSS to directive

的源代码

在我的HTML中，

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

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

Answer 2

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

听起来你的风格问题是视图封装或特殊性。

扩展角度组件（仅限装饰器）

2 个答案: