Angular 4+中变量变更时重新调用组件的实现咨询

根据你的场景，当前的*ngIf仅在type和graphic变化时控制组件的显示/隐藏，但type1或type2更新时组件已经处于渲染状态，不会自动重新初始化。下面提供两种可行方案，你可以根据实际情况选择：

方案1：让子组件监听输入属性变化（推荐，若你能修改子组件代码） #

如果ngx-ebar-treemo是你自己开发的组件，最佳方式是让它实现OnChanges接口，监听type1和type2的变化，然后内部触发更新逻辑：

// ngx-ebar-treemo.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'ngx-ebar-treemo',
  // 其他组件配置（template、style等）
})
export class NgxEbarTreemoComponent implements OnChanges {
  @Input() type1: string;
  @Input() type2: string;

  ngOnChanges(changes: SimpleChanges) {
    // 检测到type1或type2变化时，重新执行组件初始化逻辑
    if (changes['type1'] || changes['type2']) {
      this.reinitializeComponent();
    }
  }

  private reinitializeComponent() {
    // 这里写组件的核心初始化逻辑，比如重新加载数据、渲染图表等
    // 例如：this.loadChartData(this.type1, this.type2);
  }
}

同时，主组件模板里建议改用属性绑定替代插值表达式（更符合Angular最佳实践，类型更安全）：

<ngx-ebar-treemo 
  *ngIf="type=='Bar' && graphic" 
  [type1]="type1" 
  [type2]="type2">
</ngx-ebar-treemo>

方案2：强制重建组件（适用于第三方组件，无法修改子代码） #

如果ngx-ebar-treemo是第三方组件，无法修改其内部逻辑，我们可以通过更新组件的唯一标识，让Angular自动销毁旧组件实例并创建新实例，从而触发重新初始化：

步骤1：在主组件中添加一个key变量并监听变化 #

// main.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html'
})
export class MainComponent implements OnChanges {
  @Input() type: string;
  @Input() graphic: boolean;
  @Input() type1: string;
  @Input() type2: string;

  // 用于触发组件重建的唯一key
  private componentKey = 0;

  ngOnChanges(changes: SimpleChanges) {
    // 当type1或type2发生变化时，更新key值
    if (changes['type1'] || changes['type2']) {
      this.componentKey++;
    }
  }
}

步骤2：在模板中关联key到组件的渲染条件 #

<ngx-ebar-treemo 
  *ngIf="type=='Bar' && graphic && componentKey" 
  [type1]="type1" 
  [type2]="type2">
</ngx-ebar-treemo>

每次type1或type2变化时，componentKey递增，*ngIf的条件会重新评估——虽然最终结果还是true，但Angular会识别到依赖值变化，销毁旧的组件实例并创建新的，新组件会自动读取最新的type1和type2值。

内容的提问来源于stack exchange，提问作者Serik