时间戳

首页 > 解决方案 > 如果我们不能从父组件更改属性或操作它们，@ViewChild 有什么用？

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

问题描述

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

我的问题：

  1. 值在第一个组件中似乎如何改变，但在第二个组件中没有改变——这意味着模式或值在“心脏组件”中没有改变（这就是为什么没有在 About 组件中更新）——但是这似乎是如何得到的在家庭组件中更改为“33”？

  2. 如果“子组件属性”的值不能通过使用@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 - 关于.component.html

<app-heart></app-heart>

4 - heart.component.ts

age = 23;

快照（点击按钮）

在此处输入图像描述

标签： javascriptangularcomponentsangular-directiveviewchild

解决方案

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

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

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

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

推荐阅读