Angular中条件渲染组件时ViewChild访问的挑战与解决方案

<div *ngIf="externalCondition">
  <my-component #MyComponentElem></my-component>
  <button [disabled]="!MyComponentElem.myDetailsForm.valid" (click)="MyComponentElem.AFunctionInsideComponent()">
    提交
  </button>
</div>

import { Component, ViewChild } from '@angular/core';
import { MyComponent } from '../my-component/my-component.component';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent {
  externalCondition: boolean = false; // 初始为false

  // @ViewChild在这里，但当*ngIf为false时，MyComponentElem不存在于DOM中
  @ViewChild('MyComponentElem', { static: true }) myComponentElemRef!: MyComponent;

  constructor() {
    // 模拟外部条件变化
    setTimeout(() => {
      this.externalCondition = true;
      console.log('externalCondition is now true');
    }, 2000);
  }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
  public myDetailsForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myDetailsForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  public AFunctionInsideComponent() {
    console.log('AFunctionInsideComponent called in MyComponent');
    if (this.myDetailsForm.valid) {
      console.log('Form data:', this.myDetailsForm.value);
    } else {
      console.warn('Form is invalid.');
    }
  }
}

<!-- 使用 [hidden]="!externalCondition" 替代 *ngIf="externalCondition" -->
<div [hidden]="!externalCondition">
  <my-component #MyComponentElem></my-component>
  <!-- 使用可选链 ?. 增加健壮性，以防myDetailsForm在MyComponent初始化完成前被访问 -->
  <button [disabled]="!MyComponentElem?.myDetailsForm?.valid" (click)="MyComponentElem?.AFunctionInsideComponent()">
    提交
  </button>
</div>

import { Component, ViewChild, OnInit } from '@angular/core';
import { MyComponent } from '../my-component/my-component.component';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit {
  externalCondition: boolean = false;

  // 使用 [hidden] 后，MyComponentElem 始终存在于 DOM 中，因此 static: true 是合适的
  // myComponentElemRef 将在 ngOnInit 阶段可用
  @ViewChild('MyComponentElem', { static: true }) myComponentElemRef!: MyComponent;

  constructor() {}

  ngOnInit() {
    // 此时 myComponentElemRef 已经有值，因为 MyComponent 即使隐藏也已创建
    console.log('Container ngOnInit - myComponentElemRef:', this.myComponentElemRef);

    // 模拟外部条件变化
    setTimeout(() => {
      this.externalCondition = true;
      console.log('externalCondition is now true, MyComponent becomes visible.');
      // 此时可以安全访问子组件的属性和方法
      if (this.myComponentElemRef && this.myComponentElemRef.myDetailsForm) {
        console.log('Form validity after condition change:', this.myComponentElemRef.myDetailsForm.valid);
      }
    }, 2000);
  }
}

<form [formGroup]="myDetailsForm">
  <div>
    <label for="name">姓名:</label>
    <input id="name" type="text" formControlName="name">
    <div *ngIf="myDetailsForm.get('name')?.invalid && myDetailsForm.get('name')?.touched" class="error">
      姓名是必填项。
    </div>
  </div>
  <div>
    <label for="email">邮箱:</label>
    <input id="email" type="email" formControlName="email">
    <div *ngIf="myDetailsForm.get('email')?.invalid && myDetailsForm.get('email')?.touched" class="error">
      请输入有效的邮箱地址。
    </div>
  </div>
</form>
<p>表单是否有效: {{ myDetailsForm?.valid }}</p>