Angular中从子组件获取数据后如何更新父组件的视图？

核心问题原因 #

你的代码不生效主要有3个问题：

1. @ViewChild 只能获取父组件模板中静态声明的子组件实例，你用 ngx-bootstrap 的 modalService 动态创建的模态框实例，需要通过 bsModalRef.content 获取，原代码里的 @ViewChild 永远拿不到实例，所以赋值逻辑从未生效。
2. 原赋值逻辑写在 ngAfterViewInit 中，该钩子只会在组件初始化后执行一次，后续子组件的 emails 数组更新，父组件完全感知不到。
3. 数组属于引用类型，若直接赋值引用，内部元素变更可能不会触发Angular变更检测，导致视图不刷新。

具体修改步骤 #

第一步：修改子组件，新增提交事件抛出数据 #

给子组件新增 Output 事件，用户点击提交按钮时抛出邮箱数组，同时关闭模态框：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal'; // 引入模态框引用用于关闭弹窗

@Component({
  selector: 'app-add-student-popup',
  templateUrl: './add-student-popup.component.html',
  styleUrls: ['./add-student-popup.component.scss']
})
export class AddStudentPopupComponent implements OnInit {
  emails: string[] = [];
  // 新增Output事件，用于向父组件抛数据
  @Output() emailsSubmitted = new EventEmitter<string[]>();

  constructor(private bsModalRef: BsModalRef) { }

  ngOnInit(): void {
  }

  // **** 其他将用户输入的邮箱添加到「emails」数组的代码 ****

  sendData() {
    // 提交时抛出邮箱数组
    this.emailsSubmitted.emit(this.emails);
    // 关闭模态框
    this.bsModalRef.hide();
  }
}

第二步：修改父组件，订阅子组件提交事件 #

删除无用的 @ViewChild 声明和 ngAfterViewInit 逻辑，打开模态框时直接订阅子组件的提交事件，收到数据后更新父组件本地变量：

import { Component, OnInit } from '@angular/core';
import { BsModalRef, BsModalService } from  'ngx-bootstrap/modal/';
import { AddStudentPopupComponent } from './add-student-popup/add-student-popup.component';

@Component({
  selector: 'app-create-course',
  templateUrl: './create-course.component.html',
  styleUrls: ['./create-course.component.scss']
})
export class CreateCourseComponent implements OnInit {
  bsModalRef!: BsModalRef;
  emails: string[] = [];
  isEmpty: boolean = true;

  constructor(private modalService: BsModalService) { }

  ngOnInit(): void {}

  openAddStudentModal() {
    this.bsModalRef = this.modalService.show(AddStudentPopupComponent, {class: 'modal-lg'});
    this.bsModalRef.content.closeBtnName = 'Close';
    // 订阅子组件的提交事件，更新父组件数据
    this.bsModalRef.content.emailsSubmitted.subscribe((emails: string[]) => {
      // 用扩展运算符创建新数组，确保触发变更检测
      this.emails = [...emails];
      // 同步更新isEmpty状态
      this.isEmpty = this.emails.length === 0;
    });
  }
}

视图验证 #

你原有的视图代码不需要做任何修改，父组件的 emails 和 isEmpty 变量更新后，Angular会自动触发视图刷新，完成列表渲染。

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