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

问题描述

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

@Component({选择器:我的标签导航栏"，样式:[``]//自定义 css 在这里})导出类 TabNavBarComponent 扩展 MdTabNavBar {}

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

@Component({选择器:我的标签导航栏"，模板:`<div class=\"mat-tab-links\"><ng-content></ng-content><md-ink-bar></md-ink-bar>

`，样式:[``]//自定义 css 在这里})导出类 TabNavBarComponent 扩展 MdTabNavBar {}

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

解决方案

这是一种解决方法

我创建了一个新指令

@Directive({选择器:'[myTabNavBar]'，})导出类 TabNavBarDirective {@HostBinding('style.background-color')背景颜色:字符串 = '黄色';}

来自如何向指令添加CSS

的源代码

在我的 HTML 中，

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

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 {
}

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.

解决方案

This is a workaround

I created a new directive

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

Source code from How to add CSS to directive

In my HTML,

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

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

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