diff --git a/portal/src/app/main/main.component.html b/portal/src/app/main/main.component.html
index 1b6d8ded69a99c3d4876f7913945f8160f22b323..80212a81bb129956073386d14ba7e752cd83fd2a 100644
--- a/portal/src/app/main/main.component.html
+++ b/portal/src/app/main/main.component.html
@@ -32,7 +32,7 @@
     </nz-header>
     <nz-content>
       <div class="inner-content">
-        <nz-tabset nzLinkRouter style="height: 100px;" nzType="card">
+        <nz-tabset nzLinkRouter style="height: 100px;" nzType="card" (nzSelectChange)="onTabsChange($event)">
           <nz-tab>
             <a nz-tab-link routerLink="dash">Default</a>
             Default.
diff --git a/portal/src/app/main/main.component.ts b/portal/src/app/main/main.component.ts
index 3e40aa6873d0c563a2ce18117a7795690bfeabbb..a9396b0d301511098d9d946edd77c7286e0f6ae0 100644
--- a/portal/src/app/main/main.component.ts
+++ b/portal/src/app/main/main.component.ts
@@ -58,23 +58,49 @@ export class MainComponent implements OnInit {
   @ViewChild("container", {read: ViewContainerRef}) container: ViewContainerRef;
 
   constructor(private mqtt: MqttService, private router: Router, private resolver: ComponentFactoryResolver) {
-    router.events.subscribe((e:any) => {
-      console.log('router event', e)
-      if (this.container && this.container.createComponent
-        && e.snapshot && e.snapshot.component && e.snapshot.children.length==0) {
-
-        const factory = resolver.resolveComponentFactory(e.snapshot.component);
-        this.container.clear();
-        const ref = this.container.createComponent(factory);
-        //TODO 第一次，container还未准备好
-        //TODO 添加路由参数
-        //TODO call ref.destroy() in ngOnDestroy
-      }
+    router.events.subscribe((e: any) => {
+      //console.log('router event', e)
+      // if (this.container && this.container.createComponent
+      //   && e.snapshot && e.snapshot.component && e.snapshot.children.length == 0) {
+      //
+      //   const factory = resolver.resolveComponentFactory(e.snapshot.component);
+      //   this.container.clear();
+      //   const ref = this.container.createComponent(factory);
+      //   //TODO 第一次，container还未准备好
+      //   //TODO 添加路由参数
+      //   //TODO call ref.destroy() in ngOnDestroy
+      //
+      //
+      // }
     });
     //TODO unsubscribe
 
   }
 
+  tabs = [];
+
+  onTabsChange(e): void {
+    //TODO 实现标签页
+    // 1、打开对应标签，如果未加载组件，则解析路由，导入组件，已加载则忽略
+    // 2、路由切换，没有自动打开对应标签，可能情况：
+    //  a、标签未创建或已经关闭，此时需要自动创建新标签，打开页面
+    //  b、无效路由
+    //
+
+    //e.index
+
+    // this.router.routerState.snapshot.root.firstChild.firstChild.firstChild...
+    let route: any = this.router.routerState.snapshot.root;
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+    const factory = this.resolver.resolveComponentFactory(route.component);
+
+    this.container.clear();
+    const ref = this.container.createComponent(factory);
+
+  }
+
   ngOnInit(): void {
     this.mqtt.subscribe('/+/+/recv').subscribe(packet => {
       console.log('packet', packet);