angularタブバー切り替えを実装するにはどうすればよいですか?この記事ではangular4でタブバー切り替えを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連チュートリアルの推奨事項: 「angular チュートリアル」
管理システムのタブ切り替えページは一般的な要件であり、おおよそ次のとおりです。 ：
左側のメニューをクリックすると、右側に対応するタブが表示され、異なるタブを同時に編集できます。情報は表示されません。切り替え時に紛失しました！
PHP または .net (Java 開発テクノロジ) を使用し、おそらく表示を切り替えてから ifram を追加してそれを行うか、ajax を通じて情報をロードして対応するレイヤーを表示します。
しかし、もしangular を使用します。これを実現するにはどうすればよいですか?最初のアイデアは、同じ ifarm を使用して実装できるかということです。
2 番目に思い浮かぶのは、ルーティング ソケットが次のようになっているということです。
でも達成できなかったので、単純なタブページってそんなに難しいのかな？
それとも本当に簡単な方法はないのでしょうか?
長い間、私はこれについて気にしていませんでした
なぜなら、angular の理解と学習が十分ではないことが分かっていたからです。 Zhihu の記事
Angular ルーティングの再利用戦略
そこで私はアイデアを思いつき、最終的に anguar を実装するまでに半日かかりました4 タブ ページ切り替えの一般的な考え方は次のとおりです。
1. 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 } }
2. 戦略をモジュールに登録します :
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 { }
上記の 2 つのステップは基本的に再利用戦略を実装しますが、最初のレンダリングを実現するには、まだいくつかの他の作業を行う必要があります
3. ルートを定義し、データを追加します。データ ルーティング コードは次のとおりです :
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 ]
4.
import { Component } from '@angular/core'; import { SimpleReuseStrategy } from './SimpleReuseStrategy'; import { ActivatedRoute, Router, NavigationEnd } from '@angular/router'; import { Title } from '@angular/platform-browser'; import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; @Component({ selector: 'app-root', styleUrls:['app.css'], templateUrl: 'app.html', providers: [SimpleReuseStrategy] }) export class AppComponent { //路由列表 menuList: Array<{ title: string, module: string, power: string,isSelect:boolean }>=[]; constructor(private router: Router, private activatedRoute: ActivatedRoute, private titleService: Title) { //路由事件 this.router.events.filter(event => event instanceof NavigationEnd) .map(() => this.activatedRoute) .map(route => { while (route.firstChild) route = route.firstChild; return route; }) .filter(route => route.outlet === 'primary') .mergeMap(route => route.data) .subscribe((event) => { //路由data的标题 let title = event['title']; this.menuList.forEach(p => p.isSelect=false); var menu = { title: title, module: event["module"], power: event["power"], isSelect:true}; this.titleService.setTitle(title); let exitMenu=this.menuList.find(info=>info.title==title); if(exitMenu){//如果存在不添加，当前表示选中 this.menuList.forEach(p => p.isSelect=p.title==title); return ; } this.menuList.push(menu); }); } //关闭选项标签 closeUrl(module:string,isSelect:boolean){ //当前关闭的是第几个路由 let index=this.menuList.findIndex(p=>p.module==module); //如果只有一个不可以关闭 if(this.menuList.length==1) return ; this.menuList=this.menuList.filter(p=>p.module!=module); //删除复用 delete SimpleReuseStrategy.handlers[module]; if(!isSelect) return; //显示上一个选中 let menu=this.menuList[index-1]; if(!menu) {//如果上一个没有下一个选中 menu=this.menuList[index+1]; } // console.log(menu); // console.log(this.menuList); this.menuList.forEach(p => p.isSelect=p.module==menu.module ); //显示当前路由信息 this.router.navigate(['/'+menu.module]); } }
app.html コードは次のとおりです:
全体的な効果は次のとおりです:
最後にメニューをクリックすると、対応するラベルの選択が表示され、編集内容を切り替えることができます。ラベルを閉じるときに、メニューを再度クリックすると、内容がリロードされます。
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！
以上がangular4でタブ切り替えを実装する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
