ContentChildren未填充Angular 5

Question

我有一个可以包含多个Pane的Panes组件，我必须能够访问Panes组件中的各个Pane。为此，我使用了ContentChildren，但由于某些原因，它无法识别/注册Pane，即使它们正在呈现。

你能告诉我我哪里做错了吗？

窗格

@Component({
  selector: "panes",
  template: `
    <ng-content select="[pane]"></ng-content>
  `
})
export class Panes {
  @ContentChildren(Pane) panes: QueryList<Pane>;

  ngAfterContentInit() {
    console.log("Initial: ", this.panes.length);
    this.panes.changes.subscribe(changes => {
      console.log("After Changes: ", changes.length);
    });
  }
}

窗格

 @Directive({selector: 'pane'})
    export class Pane {
      @Input() id: string;
    }

标记

<panes>
  <div pane>
    1
  </div>
  <div pane>
    2
  </div>
  <div pane *ngIf="show">
    3
  </div>
</panes>
<button type="button" (click)="toggle()">Toggle</button>

Plnkr：https://plnkr.co/edit/rTVsFoPFu7uBOpweWXW4?p=preview

Answer 1

我在这里登陆，因为我正面临着类似的问题，但我发现你的问题只是关于Pane指令中错误的选择器。

它应该是：

@Directive({selector: '[pane]'})
export class Pane

而不是：

@Directive({selector: 'pane'})
export class Pane

此处缺少方括号[]

下面是您的工作示例的stackblitz

https://stackblitz.com/edit/angular-stackoverflow48159514?embed=1&file=src/app/pane.directive.ts