如何通过事件将数据从父级传递给子级

Posted 2023-02-22

【中文标题】如何通过事件将数据从父级传递给子级

【英文标题】：How to pass data from parent to child angular through an event

【发布时间】：2019-03-15 19:26:44

【问题描述】：

我需要在 Angular 上将数据从父级传递给子级。我有一个标签组。

<mat-tab-group>
    <mat-tab label="Some text0">
        <app-comp></app-comp1>
    </mat-tab>
    <mat-tab label="Some text">
        <app-comp1 [param1]="var1"></app-comp1>
    </mat-tab>
</mat-tab-group>

这里没问题。最初 param1 在加载组件时正确获取数据。

现在在父组件（处理所有的组件）中，当我编辑 var1 的值时，param1 变量不会将其值刷新到“app-comp1”中

export class Component1 implements OnInit 

    @Input() var1             : any;

这样可以吗？

【参考方案1】：

您正在您的孩子中创建一个名为 var1 的输入属性，并使用 param1 作为不起作用的名称。

在子组件中声明的 @Input 属性的名称和您在父组件模板中绑定的属性的名称，必须相同。

改变这个：

@Input() var1: any;

到

@Input() param1: any;

或

改变这个：

<app-comp1 [param1]="var1"></app-comp1>

到

<app-comp1 [var1]="var1"></app-comp1>

【讨论】：

是的，你是对的，但我的问题是当我在其他组件中编辑并加载所有组件时如何刷新这个 var。