Angular 6 指令属性不动态变化

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 挂钩。但是，在复杂类型（对象、数组）上，如果 object/array 引用更改，将调用 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 指令属性不动态变化

Angular 6 directive attribute not changing dynamically

angular-directive

angular

angular6

angular7