时间戳

首页 > 解决方案 > ViewChild 与输入/输出 - Angular 最佳实践

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

问题描述

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

选项 1：将当前页面和总页面公开为s，为下一个/上一个页面请求@Input创建事件发射器 ( s)。@Output

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

选项 2：为当前页面和总页面创建简单的属性，为下一个/上一个页面请求创建 observables/subjects 并通过@ViewChild.

<pager></pager>

@ViewChild(PagerComponent)
pager: PagerComponent

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

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

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

标签： angular

解决方案

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

情况一：

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

子组件将使用“property = value”呈现，并且每当“value”更改时，子组件的视图将被更新（因为输入属性已更改）。

情况乙：

<child></child>

child.property = value;

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

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

推荐阅读