改用Modal方式，弹窗编辑，数据回传后，要刷新列表，或插入

portal/src/app/main/tunnel-edit/tunnel-edit.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api.service';
 import {ActivatedRoute} from '@angular/router';
 import {TabRef} from '../tabs/tabs.component';
+import {NzModalRef} from 'ng-zorro-antd';
 
 @Component({
   selector: 'app-tunnel-edit',
@@ -14,8 +15,8 @@ export class TunnelEditComponent implements OnInit {
 
   data: any = {is_server: true, type: 'tcp-server', addr: ':1843'};
 
-  constructor(private as: ApiService, private routeInfo: ActivatedRoute, private tab: TabRef) {
-    tab.name = '通道创建';
+  constructor(private as: ApiService, private routeInfo: ActivatedRoute, private mr: NzModalRef) {
+    //tab.name = '通道创建';
   }
 
   ngOnInit(): void {
@@ -32,13 +33,15 @@ export class TunnelEditComponent implements OnInit {
       this.as.put(this.target + '/' + this.data.id, this.data).subscribe(res => {
         console.log(res);
         // TODO 修改成功
-        this.tab.Close();
+        // this.tab.Close();
+        this.mr.close();
       });
     } else {
       this.as.post(this.target, this.data).subscribe(res => {
         console.log(res);
         // TODO 保存成功
-        this.tab.Close();
+        // this.tab.Close();
+        this.mr.close();
       });
     }
   }

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

 import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api.service';
-import {NzTableQueryParams} from 'ng-zorro-antd';
+import {NzModalService, NzTableQueryParams} from 'ng-zorro-antd';
 import {Router} from '@angular/router';
 import {TabRef} from '../tabs/tabs.component';
+import {TunnelEditComponent} from "../tunnel-edit/tunnel-edit.component";
 
 @Component({
   selector: 'app-tunnel',
@@ -31,7 +32,7 @@ export class TunnelComponent implements OnInit {
   statusFilters = [{text: '启动', value: true}];
 
 
-  constructor(private as: ApiService, private router: Router, private tab: TabRef) {
+  constructor(private as: ApiService, private router: Router, private tab: TabRef, private ms: NzModalService) {
     tab.name = '通道管理';
   }
 
@@ -84,7 +85,14 @@ export class TunnelComponent implements OnInit {
   }
 
   create(): void {
-    this.router.navigate(['/admin/tunnel/create']);
+    // this.router.navigate(['/admin/tunnel/create']);
+    const modal = this.ms.create({
+      nzTitle: '创建',
+      nzContent: TunnelEditComponent,
+      // nzViewContainerRef: this.viewContainerRef,
+      nzComponentParams: {
+      },
+    });
   }
 
   edit(c): void {