Как предотвратить перезапись значения переменной класса дочернего компонента, когда несколько экземпляров компонента используются на одной странице?

У меня есть дочерний компонент, в котором есть переменная класса с именем 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>

Значение emptyMessage для всех трех дочерних компонентов должно быть значением, присвоенным последним дочерним компонентом, который был инициализирован, в данном случае экземпляром в child component copy 3 mat-tab.


angular class variables components mat-tab
person Maurice    schedule 24.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Они не разделяют значение — каждое свойство, объявленное в компоненте, относится к этому компоненту. Так уж получилось, что он генерирует одно и то же значение три раза.

Это связано с тем, что содержимое каждой вкладки загружается с нетерпением, они инициализируются в одно и то же время.

Я подготовил пример stackblitz с вашим вариантом использования с дополнительным свойством counter, которое использует инкрементный счетчик . Я также добавил случай, когда содержимое вкладки также загружается лениво.

person TotallyNewb    schedule 25.03.2021
comment
Я узнал, в чем проблема... Я инициализировал emptyMessage в случае переключателя, в котором в качестве условия использовалась входная переменная компонента. Причина, по которой значение было одинаковым для всех компонентов, заключалась в том, что я забыл добавить break; к каждому case. Это была глупая ошибка! - person Maurice; 25.03.2021