Атрибут Angular 6 не изменяется динамически - PullRequest
Новая
       26

Атрибут Angular 6 не изменяется динамически

0 голосов
/ 27 июня 2019

У меня есть компонент A, который имеет пользовательскую директиву на странице:

Вид: 

<warning [details]='details'></warning>

Компонент: 

    export class AComponent implements OnInit {
      details: ConfirmDetails = {
        header_class: ""   
      };
      languageChanged(newLang: string) {
        this.currentLanguage = newLang;
        this.ngOnInit();
      }
     ngOnInit() {
       if (this.currentLanguage === "English"){
          this.details.header_class = "line1 font50";
       }
       else{
         this.details.header_class = "line2 font90";
       }
    }

Один раз languageChanged() named, директива не обновляется. 

    export class WarningComponent implements OnInit {
      @Input() details: ConfirmDetails;

      ngOnInit() {
           console.log(this.details.header_class);
       }
    }

Итак, при первой загрузке страницы вход details равен "line1 font50", но при вызове languageChanged() он не меняется, поэтому я не вижулюбой вывод консоли.

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 27 июня 2019

ngOnInit вызывается один раз, когда компонент инициализируется в первый раз. Если вы хотите зафиксировать дальнейшие изменения в @Input, вам нужно использовать ngOnChanges hook. Однако для сложных типов (объект, массив) ngOnChanges будет вызываться при изменении ссылки на объект / массив и не будет вызываться при изменении поля объекта или элементов массива.

Если вы хотите, чтобы изменения регистрировались при каждом вызове languageChanged(), сделайте следующее:

в AComponent

  ngOnInit() {
    // clones the object with a brand new reference
    const tmpDetails = JSON.parse(JSON.stringify(this.details));
    if (this.currentLanguage === "English") {
      tmpDetails.header_class = "line1 font50";
    }
    else {
      tmpDetails.header_class = "line2 font90";
    }
    this.details = tmpDetails;
  }

в WarningComponent

export class WarningComponent implements OnChanges  {
  @Input() details: any;

  ngOnChanges() {
    console.log("details:", this.details);
  }
}

вот рабочая демоверсия https://stackblitz.com/edit/angular-yhv8qq

...