管理系统 tab 切换页，是一种常见的需求，大概如下：
点击左边菜单，右边显示相应的选项卡，然后不同的选项卡面可以同时编辑，切换时信息不掉失！
用php或.net,java的开发技术,大概是切换显示,然后加一个ifram来做到，或者通过ajax加载信息显示相应的层.
但是如果用angular 要如何实现呢？第一个想法，是否可以用同样的ifarm来实现呢？
第二个想到的是路由插座大概是这样的
复制代码 代码如下:
<router-outlet (activate)="activate($event)" (deactivate)='onDeactivate($event)' ></router-outlet>
但都没能实现，于是在想一个简单的tab页面就这么难吗？
或者真的没有什么简单的方法了吗？
很长一段时间，没有去管这个了
因为我知道自己对angular的理解和学习还不够，于是就放下了很长一段时间，直到在知乎看到一篇文章
于是有了一种思路，花了半天的时间终于实现了anguar 4 tab 切换页大概思路实现如下：
一、实现 RouteReuseStrategy 接口自定义一个路由利用策略
SimpleReuseStrategy.ts代码如下：
import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {} /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ public shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.routeConfig.path] = handle } /** 若 path 在缓存中有的都认为允许还原路由 */ public shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 从缓存中获取快照，若无则返回nul */ public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null } return SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 进入路由触发，判断是否同一路由 */ public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig } }
二、策略注册到模块当中：
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule as SystemCommonModule } from '@angular/common'; import { AppComponent } from './app.component'; import { AppRoutingModule,ComponentList } from './app.routing' import { SimpleReuseStrategy } from './SimpleReuseStrategy'; import { RouteReuseStrategy } from '@angular/router'; @NgModule({ declarations: [ AppComponent, ComponentList ], imports: [ BrowserModule, AppRoutingModule, FormsModule, SystemCommonModule ], providers: [ { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy } ], bootstrap: [AppComponent] }) export class AppModule { }
上面两步基本上实现了复用策略但要实现第一张效果图，还是要做一些其它工作
三、定义路由添加一些data数据路由代码如下：
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './home/about.component' import { HomeComponent } from './home/home.component' import { NewsComponent } from './home/news.component' import { ContactComponent } from './home/contact.component' export const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full', }, { path: 'home', component: HomeComponent,data: { title: '首页', module: 'home', power: "SHOW" } }, { path: 'news',component: NewsComponent ,data: { title: '新闻管理', module: 'news', power: "SHOW" }}, { path: 'contact',component: ContactComponent ,data: { title: '联系我们', module: 'contact', power: "SHOW" }}, { path: 'about', component: AboutComponent,data: { title: '关于我们', module: 'about', power: "SHOW" } }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } export const ComponentList=[ HomeComponent, NewsComponent, AboutComponent, ContactComponent ]
四、在<router-outlet></router-outlet> component 实现路由事件 events，app.component代码如下：