web-dev-qa-db-fra.com

Comment implémenter des onglets routés avec angular matériau, dans une route d'enfant?

Je veux utiliser des onglets matériels Angular https://material.angular.io/components/tabs avec une navigation de routeur dans les onglets.

J'ai essayé d'utiliser <nav mat-tab-nav-bar> Comme indiqué dans la doc, et j'ai trouvé ce tutoriel: https://nirajsonawane.github.io/2018/10/27/angulaire-material-tabs-phan- Routeur / où je peux trouver un modèle comme celui-ci:

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

Mais le problème est que mes onglets ne sont pas à la base de ma demande, mais sont dans une sous-module dans une route d'enfant. J'ai quelque chose comme ça:

Dans Module de routage d'applications:

const routes: Routes = [
  ...
  { path: 'subpath', loadChildren: () => import('./path-to-module/submodule.module').then(m => m.SubmoduleModule) },
  ...
];

Dans le module de routage de sous-module, je devrais avoir quelque chose comme ça:

const routes: Routes = [
  { path: '', component: FirstTabComponent },
  { path: 'tab2', component: SecondTabComponent },
]

Ce que je voudrais, c'est que si je vais à URL /subpath Je vois les onglets avec la première onglet sélectionné et si je vais sur URL /subpath/tab2 Je vois les onglets avec le deuxième onglet sélectionné.

Une idée de comment faire ça?

angularangular-materialangular-router
5
S. Caruso

J'ai eu le même problème. Le problème est venu du module de routage.

Afin d'hériter des classes de matériel importées, le chemin d'accès des enfants doit être chargé de paresseux au lieu d'être dirigé à partir du composant.

Cela a causé le problème:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: 'customers',
    // Don't use this method in order to link to children!
    component: 'CustomerListComponent'

  }

Le modèle "liste de clients" chargé, mais sans formatage. En outre, Angular J'ai jeté une erreur car il n'a pas pu trouver le tapis '' Directive n'importe où, même si elle était importé dans le composant parent, orders.module.ts.

C'était la solution :src > app > app-routing.module.ts

const routes: Routes = [{
      path: 'customers',
      loadChildren: () =>
        import ('./customers/customers.module').then(m => m.CustomersModule)
    }

Voici les fichiers associés du projet: src > app > orders > orders.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';

// Material components
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    CommonModule,
    OrdersRoutingModule,
    MatTabsModule
  ],
  declarations: [
    OrderListComponent
  ]
})
export class OrdersModule { }

src > app > orders > orders-list > orders-list.component.html

<mat-tab-group>
  <mat-tab label="Orders">
    <ng-template matTabContent>
      <p>Orders here.</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Shipments">
    <ng-template matTabContent>
      <p>Shipments here.</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Archived">
    <ng-template matTabContent>
      <p>Really old orders here.</p>
    </ng-template>
  </mat-tab>
</mat-tab-group>
3
Alverson Layne

Moi aussi, j'ai rencontré le même problème. J'ai cloné onglets angulaires-onglets-avec-routeur mais modifiait-le avec un composant enfant qui a également des composants enfants.

Le composant enfant s'appelle home et en home.component.html Il met en œuvre:

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

Cela crée 3 onglets appelés Notes, Photos et Documents. L'onglet Notes inclut des composants supplémentaires à la liste, de la vue, de la modification et de la suppression des notes.

J'ai créé et ajouté la source à Github et l'importait à Stackblitz:

GitHub

Stackblitz

0
janders

Une alternative à Janders solution consiste à utiliser la dépendance du routeur. Avec la fonction router.url(), vous pouvez comparer l'URL active actuelle avec vos liens de navigation.

Dans ton Component.ts:

...

rootUrl = '/path/to/your/component';

  navigation = [
    {
      name: 'Table',
      link: '',
    },
    {
      name: 'Stats',
      link: '/stats',
    },
    {
      name: 'Settings',
      link: '/settings',
    },
    {
      name: 'Export',
      link: '/export',
    }
  ];

constructor(private route: ActivatedRoute, public router: Router) {
...
}

...

Dans ton Component.html:

...

  <nav mat-tab-nav-bar mat-align-tabs="left">
    <a mat-tab-link
       *ngFor="let l of navigation"
       [routerLink]="rootUrl + l.link"
       [active]="this.router.url === rootUrl + l.link">
      {{l.name}}
    </a>
  </nav>

...

Dans votre routeur:


...

  {
    path: '/path/to/your/component',
    component: Component,
    canActivate: [AuthGuard],
    children: [
      {
        path:'',
        pathMatch: 'full',
        component: TableComponent
      },
      {
        path:'settings',
        pathMatch: 'full',
        component: SettingsComponent
      },
      {
        path:'export',
        pathMatch: 'full',
        component: ExportComponent
      },
      {
        path:'stats',
        pathMatch: 'full',
        component: StatsComponent
      }
    ]
  }

...
0
Sebastian