0

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

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

4

1 回答 1

1

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

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

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

于 2021-03-25T09:25:41.533 回答