Question

在我的应用中，有一个父组件（pc）和4个子组件（cc1，cc2，cc3，cc4）。考虑用户在输入文本中输入1-4之间的数字的情况，并且我希望在相应的组件中调用一个函数。

如果我想从子组件2中调用该函数，让我们说，我可以使用@ViewChild来实现：

@ViewChild('cc2') child;

然后通过以下方式调用该函数：

 this.child.somefunc();

但是，我不能做像

这样的事情

@ViewChild('cc'+ ValuefromUser)

例如，在onClick事件中

获取对所需组件的引用。你有什么建议我能做到吗？

Answer 1

可以使用ViewChild查询不同的变量：

@ViewChild('cc1') child1;
@ViewChild('cc2') child2;
...

在这种情况下，模板元素可以通过模板变量名称（例如cc1字符串）或组件类（例如Child1Component）来引用。

或者可以使用ViewChildren查询相同的变量：

@ViewChildren('cc1, cc2, cc3, cc4') children;

在这种情况下，模板元素只能由模板变量名称引用。区分它们将更加困难，因为children包含组件类的实例，应根据类映射检查它们，以便使用QueryList {{1}过滤具有所需标识符的类。 }或filter：

find