问题标签 [viewchildren]

我在 parent.component.ts 文件中有以下代码，我在其中使用 @ViewChildren 作为 QueryList 访问子网格。

我在像这样访问 childComponent 属性的组件中具有以下功能。

在为 checkProperty() 方法编写 jasmine 测试时，我为此创建的模拟数据抛出错误，我无法测试此方法。请找到测试用例代码。

此代码在规范文件中模拟 childComponent 的地方引发错误。我收到以下错误。

这是将 childComponent 模拟为 QueryList 的正确方法吗？请帮助解决这个问题。

我正在构建自动完成功能。

所以当我点击输入时 - 我打开下拉菜单，我在其中显示自动完成选项。

目前它工作正常。

但我想“以某种方式”连接这两个元素以相互了解。

例如，在 Angular Material 示例中，使用便宜的自动完成功能

https://stackblitz.com/edit/angular-cwkwnm?file=src%2Fapp%2Fchips-autocomplete-example.html

在输入本身上有 [matAutocomplete]="auto"属性，在mat-autocomplete组件上有#auto="matAutocomplete"参考。

如果它们相同，则在输入时单击垫子自动完成功能将打开。但是，如果我们 [matAutocomplete]="auto"从输入中删除，则不会打开自动完成功能。它们以某种方式联系在一起。

我怎样才能在我的应用程序中做到这一点？

我正在将 Angular 10 用于我的一个副项目。我有一个页面，在页面加载时，它从服务器检索条目列表（在这种情况下特别是），并在该页面上为每个条目spells呈现 1 个子组件（组件）。<app-spell>用户可以（这是可选的）指定一个名为的 url 参数name，如果他这样做并且有一个条目为真，spell.name === name那么我想滚动到该条目的组件。

我被困在试图获得这些孩子名单的地方。Ì 计划ViewChildren用于获取子组件列表。但是，似乎没有任何适当的生命周期钩子具有准确的值。此外，即使尝试使用 document.querySelector（我提前知道我将拥有一个 id 为“Arawns-Changing-Scales”的组件），我似乎也无法获得所需的 HTML 元素：

1. ngAfterContentInit: 你ViewChildren一般不能在这个钩子里访问。document.querySelector-调用返回空值。
2. ngAfterViewInit：此时尚未获取条目，也没有初始化子组件。因此ViewChildren返回一个空的QueryList. document.querySelector` 返回 null
3. ngOnInit: 子组件尚未初始化。因此ViewChildren返回一个空的QueryList. document.querySelector返回空

在那之后，我没有合适的看似生命周期的钩子。我已经尝试了这里的建议并将我的访问尝试ViewChildren放入 setTimeout 回调中，这只是返回与根本不使用超时相同。我发现的其他问题是使用点击或其他用户触发的事件来触发滚动，这对我来说不是这样。

在页面加载过程中，我在哪里可以获得某种 HTMLElements/Components？

我在 Angular 12 中使用带有虚拟幻灯片的 swiper.js。最初，在加载页面时，@ViewChildren 装饰器获取对元素的引用，这些元素在 DOM 中可用。因此 QueryList 仅包含对当前、上一个和下一个滑动幻灯片的组件的引用（因为虚拟化）。但我需要参考所有可用的幻灯片。

要么，每次更改幻灯片时，我都需要以某种方式刷新@ViewChildren，或者我需要一种方法来一次获取所有组件引用。有没有办法解决这个问题？

我需要遍历 div 内的嵌套子组件。我用ViewChildren尝试过，但我只得到了一个已创建组件的列表，当我创建一个动态组件时，不幸的是，该列表没有更新。我也尝试手动运行更改检测器，但完全没有效果。

我的项目

我有一个父组件，可以从中打开包含子组件的各种选项卡这是父组件的一部分：

在 .ts 中：

孩子是：

从父视图打开选项卡，出现错误：

使用 ViewChildren 是否有错误？

编辑：我的问题是，在子组件中，我设置了一些模块布尔输入值以显示在复选框中，但打开连续选项卡，复选框未正确设置。第一个选项卡已正确设置，但后续使用第一个选项卡的值。