Comment puis-je accéder à la fonction " sélectionner la méthode de NgbTabSet dans le composant en Angular2 et ng-bootstrap?

De routage avec Ngb-TabSet

Dans AngularJs 1.x à l'aide de l'interface utilisateur du routeur configuration de noms de routes était simple. Dans Angulaire 2 avec Ng-Bootstrap il n'est pas aussi évident. Sur l'envers, ce que vous avez besoin est disponible en natif Angulaire 2 bibliothèques.

La configuration de la Route de Configuration

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

La configuration est simple, avec une seule exception: l' [données] attribut. Vous remarquerez qu'il a une clé appelée name. C'est le nom de la route. Pensez-y comme un attribut de données en tant que données de-sac. Vous pouvez ajouter plus que juste le nom de la route.

De la configuration de l'TabSet Balisage

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

Il n'y a rien de magique au-dessus de l'onglet de balisage, il ya quelques choses que vous voulez prendre note de: la première est dans le ngb-tabset élément, nous avons déclaré la variable #tab. Nous allons utiliser #tab plus tard dans le composant. Deuxièmement, chaque nbg-tab a un id jeu qui correspond à nom que nous avons défini dans la route de configuration (c'est à dire data:{name:'followups'}).

La configuration du Composant

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

La partie la plus difficile dans cet exercice a été d'obtenir l'ordre de l'exécution correcte. Si ce n'est pas correct, une collection ou une propriété de ne pas être initialisé avant d'opérer sur elle. Nous allons commencer par le premier de la classe et de travailler notre chemin vers le bas.

Tout d'abord, nous avons les variables. prospectId est la clé primaire de données, selectedTab est le nom de l'onglet actuellement sélectionné, et enfin, nous avons le tabs variable. tabs est une référence à l'attribut ( #tab ), nous avons ajouté à la ngb-tabset élément.

Suivant est le constructor. Il n'est pas évident dans la documentation, mais data est un Observable<data>. Pour capturer la valeur, nous vous abonnant à la data bien de la route.

À la suite de la constuctor est le ngOnInit. Ce n'est pas important pour les onglets, mais il ne capture le prospectId que nous utilisons dans l'onglet routage. Si vous n'avez pas de données dynamiques dans vos itinéraires, alors vous n'avez pas besoin de cela.

Enfin, nous avons ngAfterViewChecked. Pour le routage de la tabs, c'est le plus important. Ici, nous utilisons la tabs variable nous avons capturé à partir de la majoration, et c'est là que nous passons à l'onglet sélectionné, le nom de la tabs pour modifier l'onglet sélectionné.

Mise à jour

De le faire fonctionner correctement, j'ai dû ajouter de raccordement dans le tabChange de l'événement sur la ngb-tabset.

HTML:

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

Tapuscrit:

Aussi, j'ai dû coder en dur les routes dans le onTabChange fonction.

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

OriginalL'auteur Chuck Conway

Ce qui se passe parce que vous appelez sélectionnez sur les onglets avant de les onglets ont même été initialisé. NgTabset sont initialisés après le point de vue a été init. J'ai utilisé un booléen pour voir si elles ont été initialisées avant d'appeler le sélectionner.

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

    ngAfterViewInit() {
     this.tabsInitialized = true;
    }



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

OriginalL'auteur hnameer-GRIT