web-dev-qa-db-fra.com

Angular 4 onglets de matériau Charger sur l'onglet de sélection

Est-il possible de réaliser un chargement paresseux sur les onglets Matériau Angular? Sinon, j'aurais besoin d'un moyen d'exécuter une méthode lorsque vous entrez un onglet.

angularangular-material2
5
Adrian Olosutean

Vous pouvez utiliser l'événement selectChange fourni par <md-tab-group>. Il se déclenche quand une sélection d'onglets est modifiée. De la documentation : 

@Output () selectChange: Evénement émis lorsque la sélection de l'onglet a .__ modifié.

Dans votre modèle: 

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load some morecontents after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>

... et dans votre code TypeScript: 

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}

Lien vers démo de travail . 

4
Faisal

Je sais que la question portait sur angular-material 5.xx, mais pour ceux qui arrivent ici et ne font pas attention, angular-material 6 prend en charge le contenu de l'onglet de chargement paresseux de manière native https://material.angular.io/components/tabs/overview # lazy-loading .

2
papiro

Au fur et à mesure que la documentation se lit 

Alors que <md-tab-group> est utilisé pour basculer entre les vues d’un même route, <nav md-tab-nav-bar> fournit une interface utilisateur semblable à un onglet pour la navigation entre les routes.

En utilisant cette méthode, vous pouvez faire en sorte que chacun des itinéraires des onglets soit séparé et donc chaque page se charge chaque fois que l'itinéraire est activé.

<nav md-tab-nav-bar>
  <a md-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{tabLink.label}}
  </a>
</nav>

<router-outlet></router-outlet>

Veuillez trouver plus d’informations ici sous section Onglets et navigation.

1
Vikhyath Maiya