Переменная обновляется во всех тех же множественных компонентах, которые используются в root компоненте angular - PullRequest
Новая
       47

Переменная обновляется во всех тех же множественных компонентах, которые используются в root компоненте angular

0 голосов
/ 18 июня 2020

Я создал дочерний компонент и несколько раз использовал его в компоненте root. Теперь проблема в том, что когда я обновляю значение переменной в одном из компонентов, это изменение отражается во всех других компонентах. Как мне это остановить? Я не могу понять, что здесь происходит!

Пожалуйста, найдите stackblitz для проблемы

root компонент html в компонент root 

<hello></hello>
<hello></hello>

компонент привет html

<div class="green-box" *ngIf="green; else red"></div>
<ng-template #red>
  <div class="red-box"></div>
</ng-template>
<button (click)='changeColor()'>Change Color</button>

компонент привет ts 

export class HelloComponent implements OnInit {
  green: boolean = true;

  constructor(
    private changeService: ChangeService,
  ) {

  }

  ngOnInit() {
    this.changeService.change$.subscribe((data: boolean) => {
      this.green = data;
    });
  }

  changeColor() {
    this.changeService.changeColor(!this.green);
  }
}

изменить сервис ts 

export class ChangeService {

  public changeSubjcet = new Subject();
  public change$ = this.changeSubjcet.asObservable();

  changeColor( value ) {
    this.changeSubjcet.next( value );
  }

}

1 Ответ

0 голосов
/ 18 июня 2020

Расширение моего комментария

Это определение одноэлементной службы . В вашем приложении существует один и только один экземпляр наблюдаемого change$. Поэтому, если вы измените его где-нибудь, это будет отражено в каждой индивидуальной подписке. любые одноэлементные службы.

hello.component.ts 

export class HelloComponent {
  green: boolean = true;

  changeColor() {
    this.green = !this.green;
  }
}

Я изменил ваш Stackblitz .

Если вы новичок в Angular, я также рекомендую вам пройти от go до из этого учебного пособия. Он знакомит с основами.

...