Partage de la méthode d'implémentation du changement de barre d'onglets dans angulaire4-js tutoriel-php.cn

Cet article présente principalement des exemples sur la façon d'implémenter le changement de barre d'onglets dans angulaire4. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 Les onglets peuvent être modifiés en même temps, et les informations ne seront pas perdues lors du changement !

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 la socket de routage ressemble à ceci

Copiez le codeLe code est le suivant :

Mais la mise en œuvre n'a pas fonctionné, alors je me demande s'il est si difficile de créer une simple page à onglet ?

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. je l'ai 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 implémenter la page de changement d'onglet Anguar 4. comme suit :

1. Implémentez l'interface RouteReuseStrategy pour personnaliser une stratégie d'utilisation des itinéraires

Le code SimpleReuseStrategy.ts est le suivant :

import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from &#39;@angular/router&#39;;

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

Copier après la connexion

2. Enregistrez la stratégie dans le module :

Les deux étapes ci-dessus sont essentiellement réaliser la stratégie de réutilisation mais vous devez obtenir le premier effet. Figure, vous devez encore effectuer d'autres travaux

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { CommonModule as SystemCommonModule } from &#39;@angular/common&#39;;
import { AppComponent } from &#39;./app.component&#39;;
import { AppRoutingModule,ComponentList } from &#39;./app.routing&#39;
import { SimpleReuseStrategy } from &#39;./SimpleReuseStrategy&#39;;
import { RouteReuseStrategy } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  ComponentList
 ],
 imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  SystemCommonModule
 ],
 providers: [
  { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copier après la connexion

3 Définir l'itinéraire et ajouter des données. Le code de routage des données est le suivant :

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { AboutComponent } from &#39;./home/about.component&#39;
import { HomeComponent } from &#39;./home/home.component&#39;
import { NewsComponent } from &#39;./home/news.component&#39;
import { ContactComponent } from &#39;./home/contact.component&#39;



export const routes: Routes = [
 { path: &#39;&#39;, redirectTo: &#39;home&#39;, pathMatch: &#39;full&#39;, },
 { path: &#39;home&#39;, component: HomeComponent,data: { title: &#39;首页&#39;, module: &#39;home&#39;, power: "SHOW" } },
 { path: &#39;news&#39;,component: NewsComponent ,data: { title: &#39;新闻管理&#39;, module: &#39;news&#39;, power: "SHOW" }},
 { path: &#39;contact&#39;,component: ContactComponent ,data: { title: &#39;联系我们&#39;, module: &#39;contact&#39;, power: "SHOW" }},
 { path: &#39;about&#39;, component: AboutComponent,data: { title: &#39;关于我们&#39;, module: &#39;about&#39;, power: "SHOW" } },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})

export class AppRoutingModule { }

export const ComponentList=[
  HomeComponent,
  NewsComponent,
  AboutComponent,
  ContactComponent
]

Copier après la connexion

4. Implémentez les événements de routage dans le composant Le code .component est le suivant :

Le code de app.html est le suivant :

import { Component } from &#39;@angular/core&#39;;
import { SimpleReuseStrategy } from &#39;./SimpleReuseStrategy&#39;;
import { ActivatedRoute, Router, NavigationEnd } from &#39;@angular/router&#39;;
import { Title } from &#39;@angular/platform-browser&#39;;
import &#39;rxjs/add/operator/filter&#39;;
import &#39;rxjs/add/operator/map&#39;;
import &#39;rxjs/add/operator/mergeMap&#39;;

@Component({
 selector: &#39;app-root&#39;,
 styleUrls:[&#39;app.css&#39;],
 templateUrl: &#39;app.html&#39;,
 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]);
 }
}
import { Component } from &#39;@angular/core&#39;;
import { SimpleReuseStrategy } from &#39;./SimpleReuseStrategy&#39;;
import { ActivatedRoute, Router, NavigationEnd } from &#39;@angular/router&#39;;
import { Title } from &#39;@angular/platform-browser&#39;;
import &#39;rxjs/add/operator/filter&#39;;
import &#39;rxjs/add/operator/map&#39;;
import &#39;rxjs/add/operator/mergeMap&#39;;

@Component({
 selector: &#39;app-root&#39;,
 styleUrls:[&#39;app.css&#39;],
 templateUrl: &#39;app.html&#39;,
 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]);
 }
}

Copier après la connexion

L'effet global est le suivant :

<p class="row">
 <p 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>
 </p>
 <p class="col-md-8">
  <p 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>
  </p>
  <router-outlet></router-outlet>
 </p>
</p>

Copier après la connexion

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