扩展角度组件(仅装饰器) [英] Extend Angular Component ( Only decorator)

问题描述

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

I am trying to extend Angular Material component to give custom CSS . I wish to use the same component but just change the CSS . If its theme, I can change the properties but I want to change the style which is hardcoded in the component. So, I am trying to extend the component. Here is what I did.

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

此操作失败，因为未指定模板.所以我也添加了模板.所以，我复制粘贴模板.

This fails as template is not specified . So I add template too. So, I copy paste the template .

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

Now the problem is it doesn't know what is md-ink-bar and its not exported in angular . Is there anyway I can extend just changing the css.

推荐答案

这是一种解决方法

我创建了一个新指令

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

如何将CSS添加到指令中的源代码

在我的HTML中，

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

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

This works for the time being. But still I am curious how to extend components style.

这篇关于扩展角度组件(仅装饰器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！