【Angular实战/网易云】模态框（一）

一. 生成模态框

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

这个对话框说专业点就是模态框，要生成这个模态框我们得借助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=&#