Introduction à la méthode d'implémentation du changement de tabulation dans angulaire4

angularComment implémenter le changement de barre d'onglets ? Cet article vous présentera comment implémenter le changement de barre d'onglets dans Angular4. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tutoriels associés recommandés : "Tutoriel angulaire"

La page de changement d'onglet du système de gestion est une exigence courante, à peu près comme suit :

Cliquez sur le menu de gauche, l'onglet correspondant s'affichera à droite, puis différents onglets pourront être modifiés en même temps, et les informations ne seront pas perdues lorsque changer !

Utilisez PHP ou .net, la technologie de développement Java, changez probablement l'affichage, puis ajoutez un ifram pour le faire, ou chargez des informations via ajax pour afficher la couche correspondante.

Mais si vous utiliser angulaire Comment y parvenir ? La première idée est la suivante : peut-il être implémenté en utilisant le même ifarm ?

La deuxième chose qui me vient à l'esprit est que le socket de routage ressemble à ceci

7150147ed1d394a06ad26ac52e770002d643f9f2456fe4db0e530134a61924e2

Mais je n'y suis pas parvenu, alors je me demandais si une simple page à onglet était si difficile ?

Ou n’y a-t-il vraiment pas de moyen simple ?

Pendant longtemps, je m'en fichais

Parce que je savais que ma compréhension et mon apprentissage de l'angular n'étaient pas suffisants, alors je l'ai laissé de côté pendant longtemps jusqu'à ce que je le fasse. vu sur Zhihu Un article

Stratégie de réutilisation des routes angulaires

J'ai donc eu une idée, et il m'a fallu une demi-journée pour enfin la mettre en œuvre Onglet Anguar 4 L'idée générale du changement de page est la suivante :

1. Implémentez l'interface RouteReuseStrategy pour personnaliser une stratégie d'utilisation de route

Le code SimpleReuseStrategy.ts est le suivant :

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. Enregistrez la stratégie dans le module ：

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 { }

Les deux étapes ci-dessus mettent essentiellement en œuvre la stratégie de réutilisation, mais pour réaliser le premier rendu, vous devez encore faire d'autres travaux

3. Définissez l'itinéraire et ajoutez des données. Le Code de routage des données est le suivant ：

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. Implémenter les événements de routage dans le composant b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 Le code .component est le suivant :

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]);
  }
}

le code app.html est le suivant :

<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>

L'effet global est le suivant :

Enfin, cliquez sur le menu pour afficher la sélection d'étiquette correspondante, vous pouvez changer le contenu d'édition, lors de la fermeture de l'étiquette, cliquez à nouveau sur le menu pour recharger le contenu.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!