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()方法调用。我不确定这是否是一个好习惯，特别是因为它似乎破坏了预期的数据流：通过属性绑定从父母到孩子，以及通过事件从孩子到父母。但是我真的不知道在这种情况下如何进行，因为搜索的功能确实是一种方法，而不是属性。

除此之外，哪种是引用子组件的最佳方法？通过模板变量还是使用@ViewChild？

感谢您的帮助。

Answer 1

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

如果您想使用最佳做法，请使用@Input作为过滤器（更改子项中的过滤器将更改父项中的过滤器），@Output作为分组选项（使用事件发射器将事件传播到父级）。

现在不要误会我的意思：做您所做的事情完全可以。这只是意味着要想使组件通用，就必须付出更多的努力。

如果没有，则保留此内容，即使SOF上的人告诉您也不要这样做。您没有被迫重用组件！

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

1 个答案: