Tengo dos componentes en Angular como este
@Component({ selector: 'content-com', template: '<ng-content></ng-content>' }) class ContentComponent { // Select all the elements with .grouped css class @ContentChildren('.grouped') grouped; } @Component({ selector: 'main-com', template: `<content-com> <div class="grouped"></div> <div class="grouped"></div> </content-com>` }) class MainComponent { }¿Es posible seleccionar todos los elementos secundarios de contenido usando un selector css (en mi caso, selector de clase)? Si no, ¿cuál es el mejor enfoque para hacerlo?
Puede hacer esto creando una directiva. Llamémoslo Class con selector [class] , cadena Input vinculada a 'class' y hostbinding en la variable de entrada también vinculada a 'class' .
Luego haga @ContentChildren(Class, {descendants: true, read: ElementRef}) y filtre QueryList para las clases específicas que le interesan.
Aquí está el fragmento revisado:
También vea Plunker trabajando aquí
// Remember to declare this in Module @Directive({selector: '[class]'}) class Class { @HostBinding('class') @Input('class') className: string = ''; } @Component({ selector: 'content-com', template: '<ng-content></ng-content>' }) class ContentComponent implements AfterContentInit { // Select all the elements with .grouped css class @ContentChildren(Class, {descendants: true, read: ElementRef}) classes: QueryList<ElementRef>; // <--- Note This change get grouped() { if ( this.classes && this.classes.length ) { return this .classes .map((elRef:ElementRef):Element => elRef.nativeElement) .filter( (element: Element) => element.className == "grouped" ); } return []; } ngAfterContentInit(){ console.log( this.grouped ); // <-- expect (2) [div.grouped, div.grouped] } }Puedes hacerlo más fácil, sin crear una directiva. Lo que tienes que saber es que el selector de ContentChildren tiene que ser nombre de variable. Asi que:
@Component({ selector: 'content-com', template: '<ng-content></ng-content>' }) class ContentComponent { @ContentChildren('grouped') grouped: QueryList<ElementRef>; } @Component({ selector: 'main-com', template: `<content-com> <div class="grouped" #grouped></div> <div class="grouped" #grouped></div> </content-com>` }) class MainComponent { }