如何使用ViewChild在ngAfterViewInit方法上打开一个模式？

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

@Component({
  selector: 'app-parent',
  template: `
    <app-my-modal #myModal></app-my-modal>
    <button (click)="openModal()">Open Modal</button>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('myModal') modalComponent!: MyModalComponent;

  ngAfterViewInit() {
    // 在这里可以访问 modalComponent，但通常我们会在事件触发时打开模态框
  }

  openModal() {
    this.modalComponent.open(); // 假设 MyModalComponent 有一个 open 方法来显示模态框
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-modal',
  template: `
    <div *ngIf="isVisible" class="modal">
      <!-- 模态框内容 -->
    </div>
  `
})
export class MyModalComponent {
  isVisible = false;

  open() {
    this.isVisible = true;
  }

  close() {
    this.isVisible = false;
  }
}

import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { MyModalComponent } from './my-modal/my-modal.component';

@Component({
  selector: 'app-parent',
  template: `...`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('myModal') modalComponent!: MyModalComponent;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.cdr.detectChanges(); // 强制变更检测
    // 现在可以安全地访问 modalComponent
  }

  // ...
}

@ViewChild('myModal', { static: false }) modalComponent!: MyModalComponent;