ViewChild 与输入/输出 - Angular 最佳实践

Question

在我看来，在几乎所有我们指定组件@Inputs/@Output的情况下，我们也可以不使用任何@Inputs/ @Outputs 而是@ViewChild直接访问组件属性。例如，考虑寻呼机的这两个可能的 API：

选项 1：将当前页面和总页面公开为@Inputs，@Output为下一页/上一页请求制作事件发射器（s）。

<pager 
    [currentPage]="..." 
    [totalPages]="..." 
    (requestsNextPage$)="..." 
    (requestsPreviousPage$)="..."
></pager>

选项 2：为当前页面和总页面创建简单的属性，为下一页/上一页请求制作可观察对象/主题并通过@ViewChild.

<pager></pager>

@ViewChild(PagerComponent)
pager: PagerComponent

pager.currentPage = ...
pager.totalPages = ...

pager.requestsNextPage$.subscribe(...)
pager.requestsPreviousPage$.subscribe(...)

我的问题是，如果在大多数情况下这两种选择都同样可行，那么首选/最佳实践是什么，为什么？

Answer 1

您描述的两种情况并不等同。

情况一：

<child [property]="value"></child>

子组件将使用“property = value”进行渲染，每当“value”发生变化时，子组件的视图将被更新（因为输入属性发生了变化）。

情况B：

<child></child>

child.property = value;

子组件以“property = value”呈现（取决于此代码在生命周期中的运行时间），进一步的更改将不会反映在子组件的视图中。

如果您只是设置一个永不改变的初始值，那么这两种情况可能是等效的。然而，这不太可能是您想要做的。Angular 在重用组件方面非常积极，它使用的标准之一是 @Input 属性。我遇到了麻烦，由于这种行为，组件被重用而不是删除和重新创建，并且理解和调试可能非常令人沮丧。