如果我们不能从父组件更改属性或操作它们，@ViewChild 有啥用？

Posted 2023-02-23

【中文标题】如果我们不能从父组件更改属性或操作它们，@ViewChild 有啥用？

【英文标题】：What is use of @ViewChild if we cannot change properties or manipulate them from Parent Component?如果我们不能从父组件更改属性或操作它们，@ViewChild 有什么用？

【发布时间】：2019-05-07 23:31:30

【问题描述】：

我有 2 个组件 - 家庭和关于。在两者中，我都注入了第三个（子）组件-心。现在我正在使用“home 组件”中的@viewChild 来操作心中的“age”属性的值（默认设置为“23”）。我看到从“主组件”的角度来看，该值似乎发生了变化，但在“关于组件”中却没有。

我的问题：

值如何在第一个组件中更改但在第二个组件中没有更改 - 这意味着模态或值在“心”中没有更改 组件'（这就是为什么没有在 About 组件中更新的原因）——但是如何 这似乎在 home 组件中更改为“33”？

如果“子组件属性”的值不能通过父级使用@viewChild 更改——那么从父级访问有什么用。 为什么不直接使用 @input 装饰器——它做得更好 工作。不是吗？

1 - app.component.html

<app-home></app-home>
<app-about></app-about>

2a - home.component.html

<app-heart #ref1></app-heart>
<button (click)="alpha()">click</button>

2b - home.component.ts

import  Component, OnInit, ViewChild  from '@angular/core';

@ViewChild('ref1') ref1: HeartComponent;

alpha()
  this.ref1.age = 33;

3 - about.component.html

<app-heart></app-heart>

4 - heart.component.ts

age = 23;

快照（点击按钮）

【问题讨论】：

你能分享一个样本（stackblitz 链接）吗

其代码非常简单，您可以在您的设备上进行测试。我只分享了相关部分。如果我分享完整的代码，没有人会看到“long sn-p of spamed lines”。

是的，我同意，但我有点想建立一个样本，所以只是寻找一个粗略的样本来解决这个问题。

您有两个不同的 <app-heart></app-heart> 实例，因此两个位置的值都不会更新。他们过着自己的生活（如果我理解正确的话）

【参考方案1】：

您有两个不同的 <app-heart></app-heart> 实例，因此它们将保持自己的状态，这意味着其中一个实例的更改不会影响另一个实例。

如果您使用 @Input()-decorator 也是如此，该值仅在您使用它的实例上更新。

使用@Input()-decorator 时，您不必像使用@ViewChild()-decorator 那样显式设置所需的值。

当你使用@Input()而不是@ViewChild()时，你也在解耦组件之间的关系