Extend Angular Component ( Only decorator)

问题

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.

回答1:

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.

回答2:

This is documented under the guides section of the Angular Material site (it probably wasn't there when the question was posted): https://material.angular.io/guide/customizing-component-styles

It sounds like the issue with your styles is either view encapsulation or specificity.

来源：https://stackoverflow.com/questions/44585985/extend-angular-component-only-decorator

标签

angular

angular-material2