无法在父组件中@ViewChildren

Question

我试图控制一个组件的子实例，不能越过一个错误。我正试着从这个问题中找到答案。

父组件Sequence包含SequenceStep的子组件。父类包含以下声明:

@ViewChildren(SequenceStep) steps: QueryList<SequenceStep>;

那么我想为孩子们做点什么:

ngAfterViewInit() {
    this.steps.changes.subscribe(steps => {
        console.log(steps);
    });
}

得到的错误是:

metadata_resolver.js:639 Uncaught Error: cannot construct a query for属性"步骤"的"序列"，因为查询选择器不是定义。

而Sequence和SequenceStep组件都在其@Component装饰器(分别为sequence和sequence-step)中定义了它们的选择器。

我在这里做错了什么?

Answer 1

你试过添加引号到你的@ViewChildren参数吗?

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

Answer 2

此问题可能与导入SequenceStep有关，请查看相关导入行的类名。

Answer 3

有几件事

• 如果从外部传递child，则它们是content而不是child。@ViewChild()只适用于直接添加到组件模板中的子组件。

  @ContentChildren()适用于转包内容:

  @ContentChildren(TheChild) kids: QueryList<TheChild>;
  

• this.kids.changes()只通知初始化后的更改。因此，只需在ngAfterViewInit()中直接访问this.kids，然后订阅以获得有关稍后更改的通知

  ngAfterViewInit() {
    this.myKidsCount = this.kids.length;
    this.cdRef.detectChanges();
    this.kids.changes.subscribe(kids => {
        this.myKidsCount = kids.length;
    });
  }
  

• Angular不喜欢变更检测导致的变更。

ngAfterViewInit()被变更检测调用，这就是为什么this.myKidsCount = this.kids.length会导致异常。

为了解决这个问题，我在更改属性myKidsCount之后显式地调用变更检测:

constructor(private cdRef:ChangeDetectorRef){}
ngAfterViewInit() {
  this.myKidsCount = this.kids.length;
  this.cdRef.detectChanges();
}

<<p> 恰好例子/strong>

Answer 4

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

对我有用。角4. x。X Angular CLI 1.X.X