ViewChild 与输入/输出 - Angular 最佳实践 [关闭]答案

【问题标题】：ViewChild vs Input/Ouput - Angular Best Practices [closed]ViewChild 与输入/输出 - Angular 最佳实践 [关闭]
【发布时间】：2019-03-09 03:32:25
【问题描述】：

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

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

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

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

<pager></pager>

@ViewChild(PagerComponent)
pager: PagerComponent

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

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

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

【问题讨论】：

简单，可重用。基于组件的架构的全部要点。
@penleychan 我不确定你的意思。这应该回答这个问题吗？我了解基于组件的架构，我的问题是 - 以上两个可能的 API 用于首选组件，为什么？是否有一般规则，还是视具体情况而定。

标签： angular

【解决方案1】：

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

情况A：

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

子组件将使用“property = value”进行渲染，并且每当“value”更改时，子组件的视图都会更新（因为输入属性已更改）。

情况乙：

<child></child>

child.property = value;

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

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

【讨论】：

嗨@Vlad274 你知道这个问题的答案吗？ stackoverflow.com/questions/60315005/…

【解决方案2】：

当您使用@Input() 时，每次更改都会调用 ngOnChanges()，这可能会导致更多噪音。

使用 ViewChild() 配置视图查询的属性装饰器。更改检测器在视图 DOM 中查找与选择器匹配的第一个元素或指令。如果视图 DOM 发生变化，并且新的子元素与选择器匹配，则属性会更新。

所以 ViewChild() 不会产生这样的噪音，并且是优于 @Input() 的首选方式

【讨论】：