Teilen Sie die Methode zum Implementieren des Wechsels der Tab-Leiste in Angular4

In diesem Artikel werden hauptsächlich Beispiele für die Implementierung der Tab-Leistenumschaltung in Angular4 vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Verwalten der System-Tab-Wechselseite ist eine häufige Anforderung, die ungefähr wie folgt aussieht:

Klicken Sie auf das linke Menü, die entsprechende Registerkarte wird rechts angezeigt , und dann verschiedene Die Registerkarten können gleichzeitig bearbeitet werden und die Informationen gehen beim Wechseln nicht verloren!

Verwenden Sie PHP oder .net, Java-Entwicklungstechnologie, schalten Sie wahrscheinlich die Anzeige um und fügen Sie dann ein IRAM hinzu, um dies zu tun, oder laden Sie Informationen über Ajax, um die entsprechende Ebene anzuzeigen.

Aber wenn Sie Winkel verwenden Wie erreicht man das? Die erste Idee ist: Kann es mit demselben ifarm implementiert werden?

Das zweite, was mir in den Sinn kommt, ist, dass der Routing-Socket so aussieht

Kopieren Sie den CodeDer Code lautet wie folgt:

09434f3c6078524c2f2108646d1ecc4ed643f9f2456fe4db0e530134a61924e2
Aber die Implementierung hat nicht funktioniert, also frage ich mich, ob es so schwierig ist, eine einfache Registerkartenseite zu erstellen?

Oder gibt es wirklich keinen einfachen Weg?

Das war mir lange egal

Weil ich wusste, dass mein Verständnis und Lernen von Angular nicht ausreichte, habe ich es lange beiseite gelegt, bis ich Habe es auf Zhihu gesehen Ein Artikel

Angular Route Reuse Strategy

Also kam mir eine Idee, und es dauerte einen halben Tag, bis ich endlich die Anguar 4 Tab Switching-Seite implementierte. Die allgemeine Idee ist wie folgt:

1. Implementieren Sie die RouteReuseStrategy-Schnittstelle, um eine Routennutzungsstrategie anzupassen

SimpleReuseStrategy.ts-Code lautet wie folgt:

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. Registrieren Sie die Strategie im Modul:

Die beiden oben genannten Schritte im Wesentlichen Um die Wiederverwendungsstrategie zu realisieren, müssen Sie noch einige andere Arbeiten ausführen

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

3. Der Datenrouting-Code lautet wie folgt 🎜>

4. Implementieren Sie Routing-Ereignisse in der Komponente b06060c1b765d597eda031c226772d27 Der .component-Code lautet wie folgt:

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
]

Der Code von app.html lautet wie folgt:

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

Der Gesamteffekt ist wie folgt:

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

Klicken Sie abschließend auf das Menü, um die entsprechende Etikettenauswahl anzuzeigen, und Sie können die wechseln Wenn Sie den Inhalt bearbeiten, klicken Sie erneut auf das Menü, um den Inhalt neu zu laden.

Verwandte Empfehlungen:

So erzielen Sie den Umschalteffekt der Tab-Leiste

Realisieren des Umschalteffekts der Tab-Leiste in der DOM

php implementiert das Lesen und Schreiben von durch Tabulatoren getrennten Dateien

Das obige ist der detaillierte Inhalt vonTeilen Sie die Methode zum Implementieren des Wechsels der Tab-Leiste in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!