Angular 4 Sélecteur de directive pour cibler un élément dans un composant uniquement
Comment cibler un élément spécifique dans un composant de la directive Angular.
J'ai un composant avec sélecteur "surligneur". Ce composant a un projet de contenu utilisant ng-content.
Il existe une directive avec sélecteur "entrée surligneur".
Je pense que cette directive devrait être appliquée à n'importe quelle entrée uniquement à l'intérieur du composant Surligneur, mais elle s'applique à toutes les entrées de l'application - qu'est-ce qui ne va pas?
Plunker: https://plnkr.co/edit/4zd31C?p=preview
@Component({
selector: 'highlighter',
template: `
This should be highlighted:
<ng-content></ng-content>
`
})
export class HighlighterComponent {
}
@Directive({
selector: 'highlighter input'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Les sélecteurs dans Angular ne prennent pas en charge les combinateurs :
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Ainsi, le dernier sélecteur distinct de la chaîne gagne, ce qui correspond à input dans votre cas. C'est pourquoi il est appliqué à toutes les entrées.
Une autre chose est que le contenu projeté n'est pas considéré comme situé à l'intérieur d'un composant sur lequel il est projeté. Ainsi, même si Angular prend en charge les sélecteurs de combinateur, le sélecteur highlighter input ne devrait toujours pas fonctionner.
La solution la plus simple serait d’ajouter une classe à l’entrée comme ceci:
<input class="highlighter">
et cibler cette classe dans le sélecteur:
@Component({
selector: 'input.highlighter'
Un indice que j'ai trouvé dans le Angular doc est le suivant:
Angular permet uniquement aux directives de déclencher des sélecteurs CSS qui ne traversent pas les limites des éléments.
Les directives seront appliquées à tous les sélecteurs dans le module déclaré.