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

Posted 2021-05-06

我需要在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;

有可能吗？

答案

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

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

改变这个：

@Input() var1: any;

至

@Input() param1: any;

OR

改变这个：

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

至

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