Extension composant angulaire (seulement décorateur)

Question

J'essaie d'étendre le composant matériau angulaire pour donner CSS personnalisé. Je souhaite utiliser le même composant mais juste changer le CSS. Si son thème, je peux changer les propriétés mais je veux changer le style qui est codé en dur dans le composant. Donc, j'essaie d'étendre le composant. Voici ce que j'ai fait.

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

Cet échec échoue en tant que modèle n'est pas spécifié. Donc, j'ajoute aussi un template. Donc, je copie coller le modèle.

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

Maintenant, le problème est qu'il ne sait pas ce qui est md-ink-bar et sa non exportés en angle. Y at-il de toute façon je peux étendre juste en changeant le css.

Answer 1

C'est une solution de contournement

J'ai créé une nouvelle directive

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

code source de How to add CSS to directive

Dans mon HTML,

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

Cela fonctionne pour le moment étant. Mais encore je suis curieux comment étendre le style de composants.