Question

我有一个Panes组件，可以包含多个Pane个。我必须能够访问Pane组件内的单个Panes。要做到这一点，我使用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

中括号[]不存在

这是您的工作示例中的精彩片段

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

ContentChildren没有填充Angular 5

1 个答案: