Einführung in die Methode zur Implementierung des Tab-Wechsels in Angular4

angularWie implementiert man den Tab-Bar-Wechsel? In diesem Artikel erfahren Sie, wie Sie das Wechseln der Tab-Leiste in Angular4 implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlene verwandte Tutorials: „angular Tutorial“

Das Wechseln der Registerkartenseite des Verwaltungssystems ist ein häufiger Bedarf, ungefähr wie folgt:

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

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

Aber wie implementiert man es, wenn man Angular verwendet? Die erste Idee ist: Kann es mit demselben ifarm implementiert werden?

Das zweite, was mir in den Sinn kommt, ist, dass der Router-Ausgang so aussieht

Aber ich konnte es nicht erreichen, also habe ich darüber nachgedacht, ob es so schwierig ist, eine einfache Registerkarte zu erstellen?

Oder gibt es wirklich keinen einfachen Weg?

Das hat mich lange Zeit nicht interessiert

Weil ich wusste, dass mein Verständnis und Lernen von Angular nicht ausreichten, habe ich es lange beiseite gelegt, bis ich einen Artikel über Zhihu

Angular gesehen habe Strategie zur Routenwiederverwendung

Also kam ich auf eine Idee und es dauerte einen halben Tag, bis ich die Seite zum Wechseln von Anguar-4-Registerkarten endlich implementiert hatte. Die allgemeine Idee lautet wie folgt:

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

SimpleReuseStrategy. Der 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:

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

Die beiden oben genannten Schritte implementieren grundsätzlich die Wiederverwendungsstrategie, aber um das erste Rendering zu erreichen, müssen Sie dies noch tun Führen Sie andere Arbeiten aus

3. Definieren Sie die Routenaddition. Einige Daten-Routing-Codes lauten 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
]

4. Implementieren Sie Routing-Ereignisse in der Komponente 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]);
  }
}

app.html-Code lautet wie folgt:

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

Der Gesamteffekt ist wie folgt:

Klicken Sie abschließend auf das Menü, um die entsprechende Etikettenauswahl anzuzeigen. Beim Schließen können Sie den Bearbeitungsinhalt wechseln Nachdem Sie das Etikett angezeigt haben, klicken Sie erneut auf das Menü, um den Inhalt neu zu laden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Implementierung des Tab-Wechsels in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!