angular - ContentChildren 类选择器

Question

我在 Angular 中有两个像这样的组件

    @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 {
    }

是否可以使用 css 选择器(在我的例子中是类选择器)选择所有内容子项？如果不是，最好的方法是什么？

Answer 1

您可以通过创建一个指令来做到这一点。我们称它为 Class，选择器 [class]，字符串输入绑定(bind)到“class”，输入变量上的主机绑定(bind)也绑定(bind)到 “class” .

然后执行 @ContentChildren(Class, {descendants: true, read: ElementRef}) 并过滤 QueryList对于您感兴趣的特定类(class)。

这是修改后的片段:

Also See Plunker working here

// 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]    

  }
}