完成多个tab布局

Author: weihomechen

src/app/app.component.html

@@ -1,17 +1,9 @@
-<div class="container" mdl-shadow="2">
-    <mdl-layout>
-        <mdl-layout-content>
-            <div class="layout-header">
-                <app-layout-header></app-layout-header>
-            </div>
-            <div class="main-body">
-            <div class="layout-nav">
-                <app-layout-nav></app-layout-nav>
-            </div>
-            <div class="layout-body">
-                <app-layout-body></app-layout-body>
-            </div>
-            </div>
-        </mdl-layout-content>
-    </mdl-layout>
-</div>
+<mdl-layout>
+    <mdl-layout-header>
+        <app-layout-header></app-layout-header>
+    </mdl-layout-header>
+    <mdl-layout-content>
+        <app-layout-nav></app-layout-nav>
+        <app-layout-body></app-layout-body>
+    </mdl-layout-content>
+</mdl-layout>

src/app/app.module.ts

@@ -3,32 +3,39 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouteReuseStrategy } from '@angular/router';
 
 // App模块
 import { AppComponent } from './app.component';
+import { routing, CustomReuseStrategy } from './app.routing';
 
 // 第三方模块
 import { MdlModule } from '@angular-mdl/core';
 
 // 项目内模块
 import { LayoutModule } from './layout/layout.module';
+import { DemoModule } from './demo/demo.module';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    // Angular模块
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    // 第三方模块
-    MdlModule,
-    // 项目内模块
-    LayoutModule
-    // App模块
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent
+    ],
+    imports: [
+        // Angular模块
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        // 第三方模块
+        MdlModule,
+        // 项目内模块
+        LayoutModule,
+        DemoModule,
+        // App模块
+        routing
+    ],
+    providers: [
+        { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.routing.ts

@@ -0,0 +1,54 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule, RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
+import { AppComponent } from './app.component';
+
+import { DemoComponent } from './demo/demo/demo.component';
+import { Demo1Component } from './demo/demo1/demo1.component';
+import { Demo2Component } from './demo/demo2/demo2.component';
+import { Demo3Component } from './demo/demo3/demo3.component';
+
+const appRoutes: Routes = [
+    {
+        path: '',
+        redirectTo: 'demo',
+        pathMatch: 'full'
+    },
+    { path: 'demo1', component: Demo1Component },
+    { path: 'demo2', component: Demo2Component },
+    { path: 'demo3', component: Demo3Component }
+];
+
+export const appRoutingProviders: any[] = [];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+
+export class CustomReuseStrategy implements RouteReuseStrategy {
+
+    handlers: { [key: string]: DetachedRouteHandle } = {};
+
+    shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        console.log('CustomReuseStrategy:shouldDetach', route);
+        return true;
+    }
+
+    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+        console.log('CustomReuseStrategy:store', route, handle);
+        this.handlers[route.routeConfig.path] = handle;
+    }
+
+    shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        console.log('CustomReuseStrategy:shouldAttach', route);
+        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
+    }
+
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        console.log('CustomReuseStrategy:retrieve', route);
+        return this.handlers[route.routeConfig.path];//从暂存处取回
+    }
+
+    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        //在此处可以取得跳转前和跳转后的路由路径
+        console.log('CustomReuseStrategy:shouldReuseRoute', future, curr);
+        return future.routeConfig === curr.routeConfig;
+    }
+}

src/app/demo/demo.module.ts

@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MdlModule } from '@angular-mdl/core';
+
 import { DemoComponent } from './demo/demo.component';
+import { Demo1Component } from './demo1/demo1.component';
+import { Demo2Component } from './demo2/demo2.component';
+import { Demo3Component } from './demo3/demo3.component';
 
 @NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [DemoComponent]
+    imports: [
+        CommonModule, FormsModule, MdlModule
+    ],
+    declarations: [DemoComponent, Demo1Component, Demo2Component, Demo3Component]
 })
 export class DemoModule { }

src/app/demo/demo/demo.component.html

@@ -1,3 +1,4 @@
 <p>
-  demo works!
+    demo works!
 </p>
+<mdl-textfield type="text" [(ngModel)]="theText" icon="search"></mdl-textfield>

src/app/layout/body/tab/tab.component.css renamed to src/app/demo/demo1/demo1.component.css

@@ -0,0 +1,4 @@
+<p>
+    demo1 works!
+</p>
+<mdl-textfield type="text" [(ngModel)]="theText" icon="search"></mdl-textfield>

src/app/demo/demo1/demo1.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Demo1Component } from './demo1.component';
+
+describe('Demo1Component', () => {
+  let component: Demo1Component;
+  let fixture: ComponentFixture<Demo1Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Demo1Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Demo1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/demo/demo1/demo1.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-demo1',
+  templateUrl: './demo1.component.html',
+  styleUrls: ['./demo1.component.css']
+})
+export class Demo1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}