Angular не запускает обнаружение изменений через ChangeDetectorRef

Question

У меня есть дочерний компонент с входной переменной сказать «имя». Он имеет некоторое начальное значение через привязку данных через родительский компонент. Теперь, когда я изменяю значение name внутри самого дочернего компонента, Angular не знает. Как я могу сообщить Angular об этом изменении?

Из того, что я читал онлайн, я попытался использовать ChangeDetectorRef.detectChanges() или ChangeDetectorRef.markForCheck(), похоже, это не работает. Я думаю, что что-то упустил.

Вот ссылка на стек ссылка для этой проблемы. Если вы измените имя из дочернего компонента, а затем снова попытаетесь изменить имя из родительского компонента, оно не изменится, так как Angular все еще думает, что он привязан к значению, предоставленному родительским компонентом ранее. Но я изменил его из компонента Child. Как мне это исправить?

Answer 1

Чтобы Angular обнаружил изменение, вам нужно изменить ссылку переменной, передаваемой на вход.Вы можете легко вызвать изменение, назначив копию объекта.

component.html

<button (click)="onNameChangeClicked()"> Change Name From Parent</button>

component.ts

  onNameChangeClicked() {
    this.name = Object.assign('Angular from Parent ',{});
  }

Демо

Answer 2

ngOnChanges

ngOnChanges Жизненный цикл будет запускаться, только если значение свойства ограниченного ввода отличается от текущего значения

Пример:

 OnChanges(changes: SimpleChanges){
   if(changes.name.currentValue !== changes.name.previousValue){
    //if the bound value is diffrent from currentValue then ngOnChanges will be triggered
  }

Использование ngDoCheck ловушка жизненного цикла.

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

Answer 3

Вам необходимо использовать ngOnChanges ловушку lifeCycle, чтобы отразить изменения, внесенные в родительский компонент в дочерний компонент.

Например:

ngOnChanges(changes: SimpleChanges) {
    if (changes.name != undefined) {
      this.name = changes.name.currentValue           
    }
}

Также в StackBiltz я вижу, что вы связали Input следующим образом:

<hello name="{{ name }}"></hello>

Измените его на:

<hello [name]="name"></hello>

Чтобы изменить родителя от ребенка:

Дочерний компонент :

@Output() ChangeName = new EventEmitter()

changeMe() {
     this.ChangeName.emit('Angular from child')
}

Родительский компонент:

 <hello [name]="name" (ChangeName)="name = $event"></hello>