Question

我正在开发一个有父级和子级组件列表的角度应用程序。父级使用两个api调用：

A：返回一个布尔值，该布尔值显示/删除DOM中的子代。
B：在父组件的div中显示/删除标题。

我想通过ViewChildren装饰器和ngAfterViewInit向每个孩子添加一个属性，因此我将以下内容放在父对象中。

  @ViewChildren(ChildrenComponent) children: QueryList<ChildrenComponent>;


  ngAfterViewInit() {
    this.children.changes.subscribe((children) => {
       children.forEach((child) => {
           child = 'Property!!'; // this string is dynamic in my app.
       })
    });
  }

在API调用A返回后触发了订阅。这是预期的，因为新的子级已添加到QueryList中。但是，API调用B返回后，它也会被调用。

根据ViewChildren装饰器上的文档，仅当在QueryList中添加，移动或删除子项时，才应调用该子项。但是，API调用B仅触及子级外部的div。为什么触发订阅？

我包括了一个SandBox来说明此行为：https://codesandbox.io/s/angular-fll6r

ViewChildren文档：https://angular.io/api/core/ViewChildren

Answer 1

您的API将在1秒钟后激活。在此期间内，父级中没有加载任何子级。出于演示目的，您在检查时会得到def click_radio(): round_change.state(['disabled']) round_change.pack() tip_1_0 = ttk.Radiobutton(root, text = list[0] + "\n" + list[1], width = 13, variable = 1, value = 1, command=click_radio)

undefined

调用API后，将加载子级，这是子级中的更改检测。您将获得查询结果

 ngOnInit() {
    console.log(this.children) //undefined
    // API call A
}

setTimeout(() => { this.apiARes = true; console.log(this.children) // Query result }, 1000);在最初呈现子视图之后被调用。这就是ngAfterViewInit()依赖它的原因。在呈现子成员之前，我们无法访问它们。

即使未对ViewChildren进行更改，也会触发ViewChildren.changes.subscribe

1 个答案: