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

Question

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

我不确定这种行为是由mat-tab-group 还是由角度本身引起的。我知道，在 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 3mat-tab 中的实例。

Answer 1

它们不共享值 - 在组件中声明的每个属性都作用于该组件。恰好它生成了 3 次相同的值。

这是因为每个选项卡的内容都是预先加载的，它们是同时初始化的。

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