在同一页面上使用多个组件实例时，如何防止子组件类变量的值被覆盖？

问题描述

我有一个子组件，它有一个名为 emptyMessage 的类变量。在 ngOnInit() 方法中，设置了该变量的值。我在一个父组件中使用同一子组件的多个实例。我发现 emptyMessage 将在该页面上的所有子组件实例中获得相同的值。该值由初始化的最后一个子组件确定。 我在 mat-tab-group 组件中显示这些子组件。所有子组件实例都加载在单独的 mat-tab 窗口中，并且每个 mat-tab 窗口的内容都被急切地加载。

我不确定这种行为是由 mat-tab-group 还是由 angular 本身引起的。我知道在 Java 中，每当您将 class variable 定义为 static 时，该变量及其值将在由该类创建的所有实例之间共享。如果 angular 组件的类变量默认是静态的，有什么办法可以把它们变成实例变量，让不同的组件实例可以有自己的单独值？

编辑：代码

@Component({
  selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  emptyMessage:string;

  ngOnInit(): void {
    this.emptyMessage = new Date().getTime().toString();
  }
}



html file 

<p>{{emptyMessage}}</p>

父组件 HTML

<mat-tab-group>
    <mat-tab label="child component copy 1">
        <app-child></app-child>
    </mat-tab>
    <mat-tab label="child component copy 2">
        <app-child></app-child>
    </mat-tab>
    <mat-tab label="child component copy 3">
        <app-child></app-child>
    </mat-tab>
</mat-tab-group>

所有 3 个子组件的 emptyMessage 值应该是最后一个初始化的子组件分配的值，在本例中为 child component copy 3 mat-tab 中的实例。

解决方法

它们不共享值 - 在组件中声明的每个属性都限定在该组件的范围内。碰巧它产生了三次相同的值。

那是因为每个选项卡的内容都被急切地加载，它们在完全相同的时间被初始化。

我已经为您的用例准备了一个示例 stackblitz，以及使用增量计数器的附加 counter 属性。我还添加了一个选项卡内容也被延迟加载的情况。