Étendre/remplacement d'un style de réutilisables angular2 composant

En supposant que nous voulons utiliser un composant à partir d'une bibliothèque dans angular2 (exemple de material2). Le composant d'annotation ressemble à ceci:

@Component({
  moduleId: module.id,
  selector: 'md-input',
  templateUrl: 'input.html',
  styleUrls: ['input.css'],
  providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
  host: {'(click)' : 'focus()'}
})

Ce composant est livré avec un "défaut" de la feuille de style, l'entrée".css". Si nous utilisons cette composante dans notre application, nous avons susceptibles de vouloir remplacer/étendre certains du style, sans avoir à les copier et à manipuler le composant lui-même. Comment faire cela?

Solution Possible 1: Définir l'Encapsulation de "ViewEncapsulation.Aucun":

Ce n'est pas vraiment une solution, juste une solution de contournement.

Possible Solution 2: Utilisation de "::de l'ombre" ou "/deep/" dans le CSS:

Fonctionne aussi, mais sa obsolète selon WebComponent spec.

Possible Solution 3: Utiliser le CSS et remplacer le composant CSS:

Fonctionne aussi, mais il viole le shadow DOM concept.

Possible Solution 4: Remplacer directement dans le modèle de composant parent:

Exemple:

<my-cmp [font-size]="100"></my-cmp>

N'est pas vraiment adapté si nous faisons beaucoup de raisons.

Possible Solution 5: Remplacer ou étendre le "@Composante" définition avec un supplément de feuille de style en quelque sorte:

Cela semble être la seule solution correcte (au moins pour moi). Mais je n'ai aucune idée de comment faire cela...

Tous les conseils sur ce point? Peut-être que j'ai quelque chose de mal...
Merci.

InformationsquelleAutor patrickkeller | 2016-06-01
  1. 11

    Pour la solution 5, vous devez créer une sous-classe de la cible de composant, de créer un décorateur qui gère /remplace les métadonnées pour la sous composante.

    Voici un exemple:

    @CustomComponent({
  styleUrls: ['css/style.css']
})
export class OverridenComponent extends SomeComponent {
}

    La CustomComponent décorateur devrait ressembler à ceci:

    export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (!isPresent(parentAnnotation[key])) {
        annotation[key] = parentAnnotation[key];
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

    Voir cette question pour plus de détails:

    InformationsquelleAutor Thierry Templier
  2. 18

    Angulaire 4, Nous pouvons remplacer le style avec le ::ng-deep pseudo-sélecteur de classe de la classe héritée de la feuille de style. 

    :host ::ng-deep element {
    //your style here
}

    Pour plus d'informations, reportez-vous http://blog.angular-university.io/angular-ngclass-ngstyle/

    InformationsquelleAutor Mohammed Safeer
  3. 8

    Possible Solution 2: Utilisation de "::de l'ombre" ou "/deep/" dans le CSS:

    Cela s'applique uniquement si vous utilisez ViewEncapsulation.Native.

    Si vous utilisez ViewEncapsulation.Emulated (par défaut), alors Angulaire utilise sa propre interprétation de /deep/ et ::shadow et l'amortissement ne s'applique pas.

    Si vous utilisez ViewEncapsulation.Native alors vous êtes actuellement hors de la chance parce que le navigateur natif ::shadow et /deep/ profonde sont obsolètes et Angulaire ne permet pas encore de fournir un soutien pour themeing soutien pour ViewEncapsulation.Native comme par exemple en Polymère avec (polyfilled) CSS variables et mixin.

    InformationsquelleAutor Günter Zöchbauer
  4. 7

    De départ Angulaire 2.3, nous pouvons utiliser un composant de l'héritage. Afin d'accomplir votre Solution de 5 nous pourrions le faire. 

    //This is our base component that we want to override
@Component({
  selector: 'pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent {
}


//This inherits from our base component and uses a different style sheet.
@Component({
  selector: 'pagination2',
  //This is sharing the template with the parent class.  Note
  //this needs to be included since templateUrl doesn't automatically
  //inherit.
  templateUrl: './pagination.component.html',
  //This is using a unique css file 
  styleUrls: ['./pagination2.component.css']
})
export class PaginationComponent2 extends PaginationComponent {
}
    InformationsquelleAutor seescode