ngOnChanges не вызывается дважды, хотя мы меняем значение свойства дважды в родительском компоненте - PullRequest
Новая
       63

ngOnChanges не вызывается дважды, хотя мы меняем значение свойства дважды в родительском компоненте

0 голосов
/ 02 октября 2019

Есть два компонента, а именно ParentComponent и ChildComponent. Мы связываем переменную из родительского компонента с дочерним компонентом. Согласно угловой документации, «ngOnChanges» дочернего компонента вызывается всякий раз, когда изменяется значение свойства в родительском компоненте. Теперь в ParentComponent мы меняем значение этой переменной два раза, но в ChildComponent "ngOnChanges" вызывается только один раз.

Родительский компонент имеет следующий вид:

ParentComponent.html 

<p>parentcomponent works!</p>
<button (click)="onClicking()">Click here</button>
<app-childcomponent [temp]="inputfromparent"></app-childcomponent>

ParentComponent.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parentcomponent',
  templateUrl: './parentcomponent.component.html',
  styleUrls: ['./parentcomponent.component.css']
})
export class ParentcomponentComponent implements OnInit {

  private inputfromparent = "B"
  constructor() { }

  ngOnInit() {
  }

  onClicking(){
    this.inputfromparent = "C"; //line1
    console.log("Hello");
    this.inputfromparent= "D"; //line2
  }
}

Дочерний компонент выглядит следующим образом:

ChildComponent.ts 

import { Component, OnInit, OnChanges, Input } from '@angular/core';

@Component({
  selector: 'app-childcomponent',
  templateUrl: './childcomponent.component.html',
  styleUrls: ['./childcomponent.component.css']
})
export class ChildcomponentComponent implements OnInit, OnChanges{

  @Input() private temp = "A";
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(change){
    var test = change;
    console.log(test);
    console.log(this.temp);
  }
}

В файле ParentComponent.ts мы меняем значение «inputfromparent» два раза каждый раз, когда метод «onClicking» получаетвызывается при нажатии кнопки, определенной в файле ParentComponent.html (см. line1 и line2). И поскольку мы связываем эту переменную с переменной «temp» файла ChildComponent.ts, то «ngOnChanges» файла ChildComponent.ts должен вызываться дважды в соответствии с угловой документацией, а именно: 

A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.

Но "ngOnChanges" файла ChildComponent.ts вызывается только один раз, когда вызывается onClicking при нажатии кнопки, определенной в файле ParentComponent.html.

Я сомневаюсь, что, поскольку мы меняем значение«inputfromparent», два раза в методе «onClicking» файла ParentComponent.ts, поэтому «ngOnChanges» файла ChildComponent.ts должен вызываться два раза. Но его вызывают только один раз.

Ответы [ 2 ]

1 голос
/ 02 октября 2019 
  onClicking() {
    this.inputfromparent = "C"; //line1
    console.log("Hello");
    this.inputfromparent= "D"; //line2
  }

Это работает синхронно. То есть никакой другой код не выполняется до тех пор, пока onClicking не завершит свою работу: для всего внешнего мира (механизм шаблонов, обнаружение изменений и т. Д.), onClicking() был вызван, до этого значение inputfromparent было "B". ", а после, это было" D ". То, что между ними, в значительной степени является черным ящиком.

0 голосов
/ 02 октября 2019

Вам следует вызвать changedetector, иначе вы получите исключение из angular. Пожалуйста, проверьте консоль. 

export class ParentcomponentComponent implements OnInit {

  private inputfromparent = "B";
  constructor(private cd: ChangeDetectorRef) { }

  ngOnInit() {
  }

  onClicking(){
    this.inputfromparent = "C"; //line1
    this.cd.detectChanges();
    console.log("Hello");
    this.inputfromparent= "D"; //line2
    this.cd.detectChanges();
  }
}

Некоторые соображения: inputfromparent должен быть публичным, чтобы избежать производственной сборки с AOT. ChildComponent должен использовать OnPush changedetection.

...