改用Drawer，更美观

portal/src/app/main/channel/channel.component.ts

 import {Component, OnInit, ViewContainerRef} from '@angular/core';
 import {ApiService} from '../../api.service';
 import {ChannelEditComponent} from '../channel-edit/channel-edit.component';
-import {NzModalService} from 'ng-zorro-antd';
+import {NzDrawerService, NzModalService} from 'ng-zorro-antd';
 
 @Component({
   selector: 'app-channel',
@@ -12,7 +12,7 @@ export class ChannelComponent implements OnInit {
 
   channels: [];
 
-  constructor(private as: ApiService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) {
+  constructor(private as: ApiService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private drawerService: NzDrawerService) {
   }
 
   ngOnInit(): void {
@@ -28,12 +28,12 @@ export class ChannelComponent implements OnInit {
   }
 
   create(): void {
-    this.modal.create({
+    this.drawerService.create({
       nzTitle: '创建',
+      nzMaskClosable: false,
+      nzWidth: 720,
       nzContent: ChannelEditComponent,
-      nzViewContainerRef: this.viewContainerRef,
-      nzGetContainer: () => document.body,
-      nzComponentParams: {
+      nzContentParams: {
         channel: {}
       }
     });

portal/src/app/main/main.module.ts

@@ -11,7 +11,7 @@ import {MainRoutingModule} from './main-routing.module';
 import {MainComponent} from './main.component';
 import {
   NzButtonModule,
-  NzCheckboxModule, NzDividerModule,
+  NzCheckboxModule, NzDividerModule, NzDrawerModule,
   NzFormModule,
   NzIconModule,
   NzInputModule,
@@ -55,6 +55,7 @@ import {ChannelEditComponent} from './channel-edit/channel-edit.component';
     NzPopconfirmModule,
     IconsProviderModule,
     NzDividerModule,
+    NzDrawerModule,
   ],
   bootstrap: [MainComponent]
 })