Angular 8 中如何根据弹窗选择条件加载对应子组件？

你可以通过Angular Material Dialog 回传值 + 条件渲染的方式实现需求，步骤如下：

步骤1：改造弹窗组件，关闭时回传选中值 #

在dialog.component.ts中注入MatDialogRef，关闭弹窗时把选中的学历标识传递给父组件：

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

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  validateForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    public dialogRef: MatDialogRef<DialogComponent>
  ) {
    this.validateForm = this.fb.group({
      studentLevel: [null, [Validators.required]]
    });
  }

  // 提交表单时关闭弹窗并回传值
  submitForm() {
    if (this.validateForm.valid) {
      // 1代表高中，2代表大学，和你现有setRouter方法的参数对应
      const level = this.validateForm.value.studentLevel === 'lycee' ? 1 : 2;
      this.dialogRef.close(level);
    }
  }

  getErrorTip(controlName: string) {
    // 你的原有错误提示逻辑
  }
}

另外你现有模板代码有两处小问题需要修正：

• 单选框id和对应label的for属性不匹配，会导致点label无法选中单选框，修改为一一对应即可
• 你已经用了响应式表单的formControlName，不需要再加[(ngModel)]绑定，删掉冗余的[(ngModel)]="radioValue"即可

步骤2：在根组件接收弹窗返回值，定义控制变量 #

在app.component.ts中启动时打开弹窗，监听弹窗关闭事件拿到选中的学历标识：

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 控制学历组件显示：1=高中 2=大学  null=不显示
  selectedStudentLevel: number | null = null;

  constructor(private dialog: MatDialog) {}

  ngOnInit() {
    // 启动时打开弹窗，禁止点击空白区域关闭
    const dialogRef = this.dialog.open(DialogComponent, {
      disableClose: true
    });

    // 监听弹窗关闭的回传值
    dialogRef.afterClosed().subscribe(level => {
      if (level) {
        this.selectedStudentLevel = level;
      }
    });
  }
}

步骤3：根组件模板加条件渲染 #

修改app.component.html，用*ngIf指令根据选中值动态加载对应组件：

<!-- app.component.html -->
<app-university-component *ngIf="selectedStudentLevel === 2"></app-university-component>
<app-highSchool-component *ngIf="selectedStudentLevel === 1"></app-highSchool-component>

可选方案：基于路由实现 #

如果后续有单独访问两个学历页面的需求，也可以用路由方案：

1. 在路由配置里新增两个路由：/high-school对应高中组件，/university对应大学组件
2. 根组件模板替换为<router-outlet></router-outlet>
3. 弹窗提交后直接调用Router的navigate方法跳转到对应路由即可

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