Angular 6指令属性不会动态变化答案

【问题标题】：Angular 6 directive attribute not changing dynamicallyAngular 6指令属性不会动态变化
【发布时间】：2019-11-09 13:05:09
【问题描述】：

我有一个组件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()，指令就不会更新。

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

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

所以在加载details 的第一页输入是“line1 font50”，但是当 languageChanged() 调用它不会改变，所以我没有看到任何控制台输出。

我将不胜感激。

【问题讨论】：

ngOnInit 仅在“元素”附加到 DOOM 时执行（如果您有，例如 *ngIf="toogle"，则每次切换变为 true）。但变量确实发生了变化。要进行测试，请在您的 alert.html 中添加一些 {{details}}，或使用 setter stackoverflow.com/questions/36653678/…

标签： angular angular6 angular7 angular-directive

【解决方案1】：

ngOnInit 在组件第一次初始化时被调用一次。如果您想捕获对@Input 的进一步更改，您需要使用ngOnChanges 挂钩。但是，在复杂类型（对象、数组）上，如果对象/数组引用发生更改，将调用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

【讨论】：