Question

我有两个子组件并从父组件引用，我正在尝试在子组件初始化后更新@Input对象

.html：

<div>
 <app-child-one></app-child-one>
 <app-child-two [data]="test"></app-child-two>

 <button (click)="onClick()">Clicked</button>
</div>

.ts：

test: string;

onClick() {
  this.test = 'Hello World !!';
}

当我单击按钮时，两个子组件都已初始化，如何在单击按钮后将数据属性值更新为子组件？

Answer 1

使用@ViewChild可以实现这一目标。在其中添加ID #appChildTwo

<div>
 <app-child-one></app-child-one>
 <app-child-two [data]="test" #appChildTwo></app-child-two>

 <button (click)="onClick()">Clicked</button>
</div>

在父文件的.ts文件中

import {  ViewChild } from '@angular/core';

在父级中声明类变量

@ViewChild('appChildTwo') appChildTwo;

在按钮上单击。通过使用viewchild，我们可以在父级组件文件中获取子组件的引用，然后可以使用viewchild引用访问子组件的所有公共成员和功能。

onClick() {
 this.test = 'Hello World !!';
if(this.appChildTwo)
  this.appChildTwo.data= 'Hello World !!';
}

希望这会对您有所帮助。

组件初始化后更新父组件@Input属性

1 个答案: