angular4でタブ切り替えを実装する方法の紹介

angularタブバー切り替えを実装するにはどうすればよいですか?この記事ではangular4でタブバー切り替えを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「angular チュートリアル 」

管理システムのタブ切り替えページは一般的な要件であり、おおよそ次のとおりです。 ：

左側のメニューをクリックすると、右側に対応するタブが表示され、異なるタブを同時に編集できます。情報は表示されません。切り替え時に紛失しました！

PHP または .net (Java 開発テクノロジ) を使用し、おそらく表示を切り替えてから ifram を追加してそれを行うか、ajax を通じて情報をロードして対応するレイヤーを表示します。

しかし、もしangular を使用します。これを実現するにはどうすればよいですか?最初のアイデアは、同じ ifarm を使用して実装できるかということです。

2 番目に思い浮かぶのは、ルーティング ソケットが次のようになっているということです。

7150147ed1d394a06ad26ac52e770002d643f9f2456fe4db0e530134a61924e2

でも達成できなかったので、単純なタブページってそんなに難しいのかな？

それとも本当に簡単な方法はないのでしょうか?

長い間、私はこれについて気にしていませんでした

なぜなら、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. b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 コンポーネントにルーティング イベントを実装します。コンポーネント コードは次のとおりです:

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 === &#39;primary&#39;)
      .mergeMap(route => route.data)
      .subscribe((event) => {
        //路由data的标题
        let title = event[&#39;title&#39;];
        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([&#39;/&#39;+menu.module]);
  }
}

app.html コードは次のとおりです:

<div class="row">
  <div class="col-md-4">
    <ul>
      <li><a routerLinkActive="active" routerLink="/home">首页</a></li>
      <li><a routerLinkActive="active" routerLink="/about">关于我们</a></li>
      <li><a routerLinkActive="active" routerLink="/news">新闻中心</a></li>
      <li><a routerLinkActive="active" routerLink="/contact">联系我们</a></li>
    </ul>
  </div>
  <div class="col-md-8">
    <div class="crumbs clearfix">
      <ul>
          <ng-container  *ngFor="let menu of menuList">
              <ng-container *ngIf="menu.isSelect">
                  <li class="isSelect">
                      <a routerLink="/{{ menu.module }}">{{ menu.title }}</a>
                      <span (click)="closeUrl(menu.module,menu.isSelect)">X</span>
                  </li>
              </ng-container>
              <ng-container *ngIf="!menu.isSelect">
                  <li>
                      <a routerLink="/{{ menu.module }}">{{ menu.title }}</a>
                      <span  (click)="closeUrl(menu.module,menu.isSelect)">X</span>
                  </li>
              </ng-container>
          </ng-container>
      </ul>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>

全体的な効果は次のとおりです:

最後にメニューをクリックすると、対応するラベルの選択が表示され、編集内容を切り替えることができます。ラベルを閉じるときに、メニューを再度クリックすると、内容がリロードされます。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がangular4でタブ切り替えを実装する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。