在 Angular 的父模板中调用子组件的方法是一个好习惯吗？

Question

我有一个父组件，它基本上是由两个子组件组成的表单，每个子组件由一堆inputs. 这是父组件模板：

<!-- Bunch of user selected filters -->
<app-filters #filters>
</app-filters>

<!-- Bunch of user selected grouping options -->
<app-grouping-options #groupingOptions>
</app-grouping-options>

<!-- Emit an event with the composed query so
other component can recover and show the data
to the user -->
<button (click)="emitQuery(filters.getFilteringCriteria(), groupingOptions.getGroupingCriteria())">Search</button>

我感兴趣的部分是filters.getFilteringCriteria()和groupingOptions.getGroupingOptionsCriteria()方法调用。我不确定这是否是一个好的做法，特别是因为它似乎打破了预期的数据流：从父级到子级通过属性绑定，从子级到父级通过 events。但是我真的不知道在这种情况下如何进行，因为搜索的功能确实是一个方法，而不是一个属性。

除此之外，引用子组件的最佳方法是什么？通过模板变量或使用@ViewChild?

谢谢你的帮助。

Answer 1

这不是最佳实践，因为这意味着您的组件是紧密耦合的（这意味着您的第一个组件依赖于其他 2 个）。

如果您想使用最佳实践，请依赖于@Input您的过滤器（更改子项中的过滤器将更改父项中的过滤器）和@Output分组选项（使用事件发射器将事件传播到父项）。

现在不要误会我的意思：做你所做的完全没问题。这只是意味着，如果您想这样做，您将不得不加倍努力使您的组件通用。

如果没有，那就保留这个，即使 SOF 上的人告诉你不要这样做。您不会被迫重用组件！