Angular子组件Treatment-as-tiff经site-map-component触发后按钮不显示问题

问题根源 #

你代码的核心问题是site-map-component中声明的treatmentAsTIFFComponent只是一个空的类型声明，没有和模板里实际渲染的<app-treatment-as-tiff>子组件实例绑定，你调用setVisible()实际上是操作了一个未初始化的空变量，自然不会对真实渲染的组件生效，甚至控制台会抛出未定义的报错。
另外你在两个组件里重复定义了完全相同的ITreatmentAsTIFFVisibilityPasser接口，属于冗余代码，也存在类型不一致的隐患。
还有一个后续会遇到的小问题：子组件模板调用getTreatmentAsTIFF()时没有传入要求的fieldGeometry参数，后续点击按钮会报错。

修复步骤 #

1. 修改site-map-component.ts，用@ViewChild获取真实子组件实例 #

首先删除你在site-map-component里重复定义的ITreatmentAsTIFFVisibilityPasser接口，直接从子组件导入，同时用@ViewChild绑定子组件：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
// 直接导入子组件导出的接口和组件
import { TreatmentAsTIFFComponent, ITreatmentAsTIFFVisibilityPasser } from '../treatment-as-tiff/treatment-as-tiff.component';

@Component({
  // 保留你原有的组件配置
})
export class SiteMapComponent implements AfterViewInit {
  // 冗余变量可以直接删除：iTreatmentAsTIFFButtonVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
  // 用@ViewChild绑定模板里的app-treatment-as-tiff实例
  @ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent!: TreatmentAsTIFFComponent;

  constructor() {
    // 冗余的接口实例初始化代码可以删除
  }

  ngAfterViewInit(): void {
    // @ViewChild获取的实例在ngAfterViewInit生命周期之后才可用，如果你需要初始化时设置状态要写在这里
  }

  // 原有切换方法不用改，现在调用的就是真实子组件的方法了
  private toggleGetTreatmentAsTIFFButtonToVisible():void{
      this.treatmentAsTIFFComponent.setVisible()
  }
  private toggleGetTreatmentAsTIFFButtonToInvisible():void{
      this.treatmentAsTIFFComponent.setInvisible()
  }
}

2. 修复子组件按钮点击参数问题 #

修改treatment-as-tiff.component.html的点击事件，传入你需要的fieldGeometry参数，或者调整getTreatmentAsTIFF方法的参数逻辑，避免点击报错：

<button  *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState" 
    title="Get Treatment As TIFF" 
    class="btn btn-sm btn-icon" 
    <!-- 这里要传入实际的fieldGeometry参数 -->
    (click)="getTreatmentAsTIFF(你要传的fieldGeometry变量)">
    {{ "SITE.GET_TREATMENT_AS_TIFF" | translate }}
    <ng-content></ng-content>
</button>

可选补充：如果你的项目启用了OnPush变更检测策略 #

需要在子组件的setVisible、setInvisible方法里手动触发变更检测，保证视图更新：

// 子组件ts先导入ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';

constructor(
  private synopsServicesProvider:SYNOPSServicesProviderService,
  private cdr: ChangeDetectorRef
) { 
  this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
  this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
}

public setInvisible() {
  this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
  this.cdr.markForCheck();
}
public setVisible() {
  this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true
  this.cdr.markForCheck();
}

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