【Angular实战/网易云】模态框（一）_store<appstoremodule>-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43338695/article/details/108124720

本文介绍如何在Angular中实现模态框，包括利用Overlay生成模态框，通过ng-content和ngSwitch展示不同组件，以及使用ngrx进行全局状态管理，包括visible和modalType状态的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 生成模态框

当用户点击登陆或者注册的时候，就会跳出来一个对话框，要求用户输入用户名和密码等信息。

这个对话框说专业点就是模态框，要生成这个模态框我们得借助Overlay实例，这个之前在讲解搜索组件的时候已经提到过了。

  private createOverlay() {
    this.overlayRef = this.overlay.create();
    this.overlayRef.overlayElement.appendChild(this.elementRef.nativeElement);
    this.overlayRef.keydownEvents().subscribe(e => this.handleKeyDownEvent(e));
  }

二. 同一个模态框，多个不同组件

同一个模态框上可以显示不同的内容（而不用不同的内容对应多个模态框），这个可以用ng-content和ngSwitch来进行管理。

  <ng-container [ngSwitch]="modalType">
    <ng-container *ngSwitchCase="'LoginByPhone'">
      <ng-content select="[name=login]"></ng-content>
    </ng-container>
    <ng-container *ngSwitchCase="'Register'">
      <ng-content select="[name=register]"></ng-content>
    </ng-container>
    <ng-container *ngSwitchCase="'Like'">
      <ng-content select="[name=like]"></ng-content>
    </ng-container>
    <ng-container *