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';
    }
}
10
Suresh Nagar 15 ene. 2018 a las 01:58

3 respuestas

La mejor respuesta

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'
5
Max Koretskyi 15 ene. 2018 a las 09:54

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.

0
Krist Jin 16 ene. 2018 a las 18:03

Las directivas se aplicarán a todos los selectores dentro del módulo que se declara.

0
Baconbeastnz 14 ene. 2018 a las 23:07
48255016