Wie kann ich auf die "select" - Methode von NgbTabSet in der Komponente in Angular2 und ng-bootstrap?

Routing mit Ngb-TabSet

In AngularJs 1.x mit ui-router einrichten-Namen-Strecken war gerade nach vorne. Im Winkel 2 mit Ng-Bootstrap-es ist nicht so offensichtlich. Auf der anderen Seite, was Sie brauchen, ist verfügbar im einheitlichen Winkel 2 Bibliotheken.

Einrichtung der Route-Konfiguration

export const appRoutes: Routes =
    [
        { path: 'prospect/:prospectid/details', component: ProspectTabsView, data:{name:'details'} },
        { path: 'prospect/:prospectid/appointments', component: ProspectTabsView, data:{name:'appointments'} },
        { path: 'prospect/:prospectid/followups', component: ProspectTabsView, data:{name:'followups'} },
        { path: 'prospect/:prospectid/contacts', component: ProspectTabsView, data:{name:'contacts'} },
        { path: '', component: DashboardView },
        { path: '**', redirectTo: '', pathMatch: 'full'}
    ];

Die Konfiguration ist einfach und unkompliziert-mit einer Ausnahme: die [Daten] Attribut. Sie werden feststellen, es hat einen Schlüssel namens name. Dies ist der name der route. Betrachten Sie es als ein data-Attribut als Daten-Tasche. Sie können mehr als nur den Namen der route ein.

Einrichten der TabSet Markup

<ngb-tabset #tabs>
    <ngb-tab id="details">
        <ng-template ngbTabTitle>
            <a [routerLink]="['/prospect', prospectId, 'details']">Details</a>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab id="contacts">
        <ng-template ngbTabTitle>
            <a [routerLink]="['/prospect',prospectId,'contacts']">Contacts</a>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab id="appointments">
        <ng-template ngbTabTitle>
            <a [routerLink]="['/prospect', prospectId, 'appointments']">Appointments</a>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab id="followups">
        <ng-template ngbTabTitle>
            <a [routerLink]="['/prospect', prospectId, 'followups']">Follow Ups</a>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
</ngb-tabset>

Es ist nichts Magisches an den oberen Reiter markup, gibt es paar Dinge, die Sie beachten sollten: der erste ist in der ngb-tabset element, wir haben deklariert die variable #tab. Wir verwenden #tab später in der Komponente. Zweitens, jeder nbg-tab hat eine id Satz entspricht der name den wir definiert, die in der route-Konfiguration (d.h. data:{name:'followups'}).

Einrichten der Komponente

import {
     AfterViewChecked, Component, OnInit, 
    ViewChild
} from '@angular/core';
import '../../assets/css/styles.css';
import {ActivatedRoute} from "@angular/router";
import {NgbTabset} from "@ng-bootstrap/ng-bootstrap";

@Component({
    templateUrl: './tabs.view.html'
})
export class ProspectTabsView implements OnInit, AfterViewChecked{
    prospectId: number;
    selectedTab:string; 

    @ViewChild('tabs')
    private tabs:NgbTabset;

    constructor(private route: ActivatedRoute) { 
        this.route.data.subscribe(d=>{
            this.selectedTab = d.name;
        });
    }

    ngOnInit(): void {
        this.route.params.subscribe(
            params => {
                this.prospectId = +params['prospectid'];
            }
        );
    }

    ngAfterViewChecked(): void {
        if(this.tabs) {
            this.tabs.select(this.selectedTab);
        }
    } 
 }

Der schwierigste Teil in dieser übung war, die Reihenfolge der Ausführung zu korrigieren. Wenn es nicht richtig ist, eine Sammlung oder eine Eigenschaft nicht initialisiert werden, bevor Sie operieren. Wir beginnen an der Spitze der Klasse und arbeiten uns nach unten.

Zunächst haben wir die Variablen. prospectId ist der Primärschlüssel der Daten selectedTab ist der name der aktuell ausgewählten Registerkarte, und schließlich haben wir die tabs variable. tabs ist eine Referenz auf das Attribut (#tab) haben wir Hinzugefügt, um die ngb-tabset element.

Weiter ist die constructor. Es ist nicht offensichtlich in der Dokumentation, aber data ist ein Observable<data>. Um den Wert, wir abonnieren die data Eigenschaft, aus der route.

Folgenden die constuctor ist die ngOnInit. Dies ist nicht wichtig, die Tabletten, aber es tut erfassen die prospectId, die wir verwenden in der Registerkarte routing. Wenn Sie nicht alle dynamischen Daten in den Routen, dann brauchen Sie nicht diese.

Schließlich haben wir ngAfterViewChecked. Für die Weiterleitung der tabs, das ist das wichtigste. Hier verwenden wir die tabs variable, die wir erfasst haben, das markup und es ist, wo wir passieren die ausgewählte Registerkarte name, um die tabs zum ändern der ausgewählten Registerkarte.

Update

Damit dies funktioniert einwandfrei, ich hatte Sie auf hinzufügen, um hook in das tabChange Veranstaltung auf der ngb-tabset.

HTML:

<ngb-tabset [activeId]="selectedTab" #tabs (tabChange)="onTabChange($event)">

Typoskript:

Außerdem hatte ich zu fest die Routen in der onTabChange Funktion.

onTabChange($event: NgbTabChangeEvent) {
    let routes = {
        details: `/prospect/${this.prospectId}/details`,
        appointments: `/prospect/${this.prospectId}/appointments`,
        followups: `/prospect/${this.prospectId}/followups`,
        notes: `/prospect/${this.prospectId}/notes`,
        dials: `/prospect/${this.prospectId}/dials`,
    };

    this.router.navigateByUrl(routes[$event.nextId]);
}

InformationsquelleAutor Chuck Conway

Dies ist passiert weil Sie telefonieren wählen Sie auf den Registerkarten vor denen haben selbst initialisiert wurde. NgTabset initialisiert sind nach Ansicht init. Ich benutzte ein boolean um anzuzeigen, wenn Sie initialisiert wurden vor dem Aufruf von select.

    tabsInitialized: boolean = false;
    @ViewChild('tabs') public tabs:NgbTabset;

    ngAfterViewInit() {
     this.tabsInitialized = true;
    }



    ngOnChanges(){
     if(this.tabsInitialized){
      this.tabs.select('dashboard');
    }
   }
...

InformationsquelleAutor hnameer-GRIT