Question

我正在尝试控制组件的子实例，并且无法通过错误。我想跟随this issue的答案。

父组件Sequence包含SequenceStep的子组件。父级包含以下声明：

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

然后我想对孩子们做点什么：

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

我得到的错误是：

metadata_resolver.js：639未捕获错误：无法构建查询财产＆＃34;步骤＆＃34; ＆＃34;序列＆＃34;因为查询选择器不是定义

而Sequence和SequenceStep组件的@Component装饰器（sequence和sequence-step分别定义了选择器。）

我在这里做错了什么？

Answer 1

您是否尝试过向@ViewChildren arg添加引号？

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

Answer 2

有一些事情

如果你从外面传递孩子，他们满足而不是孩子。 @ViewChild()仅适用于直接添加到组件模板中的子项。

@ContentChildren()适用于已转化的内容：
```
@ContentChildren(TheChild) kids: QueryList<TheChild>;
```

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

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();
}

Plunker example

Answer 3

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

Answer 4

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

为我工作。 Angular 4.X.X Angular CLI 1.X.X

无法访问父组件

4 个答案: