Question

我有一个组件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()称它没有改变，所以我看不到任何控制台输出。

我将不胜感激。

Answer 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

Angular 6指令属性不会动态更改

1 个答案: