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

Posted 2023-02-22

【中文标题】Angular 6指令属性不会动态变化

【英文标题】：Angular 6 directive attribute not changing dynamically

【发布时间】：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 ***.com/questions/36653678/…

【参考方案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