Cómo apuntar a un elemento específico dentro de un componente en la Directiva Angular.
Tengo un componente con selector "resaltador". Este componente tiene un proyecto de contenido que usa ng-content.
Hay una directiva con selector "entrada de resaltador".
Creo que esta directiva debería aplicarse a cualquier entrada solo dentro del componente resaltador, pero se aplica a todas las entradas de la aplicación, ¿qué tiene de malo?
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';
}
}
3 respuestas
Los selectores en Angular no admiten combinadores:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Entonces, el último selector distinto de la cadena gana, que es input
en su caso. Por eso se aplica a todas las entradas.
Otra cosa es que el contenido proyectado no se considera ubicado dentro de un componente para el que se proyecta. Entonces, incluso si Angular admite selectores de combinador, el selector highlighter input
aún no debería funcionar.
La solución más simple sería agregar una clase a la entrada como esta:
<input class="highlighter">
Y apunte esta clase en el selector:
@Component({
selector: 'input.highlighter'
Una pista que encontré en el documento Angular es que:
Angular solo permite que las directivas se activen en selectores CSS que no cruzan los límites de los elementos.
Las directivas se aplicarán a todos los selectores dentro del módulo que se declara.
Preguntas relacionadas
Nuevas preguntas
angular
Preguntas sobre Angular (que no debe confundirse con AngularJS), el marco web de Google. Use esta etiqueta para preguntas angulares que no son específicas de una versión individual. Para el marco web anterior de AngularJS (1.x), use la etiqueta angularjs.