Application d'onglet - Angular 6

Question

Je suis confronté à un problème de structuration de mon application angulaire. J'ai besoin d'avoir une application à onglet au lieu du routage, ce qui est : chaque fois qu'un utilisateur clique sur un nouveau lien dans l'application, au lieu de router l'application vers ce composant, elle le fera :

1. vérifier si l'onglet est déjà ouvert, puis le sélectionner
2. s'il n'est pas ouvert, ajoutez un nouvel onglet à la liste des onglets dans l'onglet de navigation et sélectionnez-le.
3. chaque fois qu'un utilisateur clique sur l'onglet, le routeur passe au nouvel onglet.
4. lorsque vous cliquez sur "retour" dans le navigateur, le système sélectionne l'onglet précédent, ou ouvre le dernier onglet fermé.

Mon plan initial est le suivant :

1. pour supprimer la sortie de l'application et ajouter une [matTabNavBar].
2. écouter tout changement dans l'itinéraire et obtenir le composant et les paramètres liés à l'itinéraire.
3. utiliser la route comme clé pour les onglets (pour vérifier si l'onglet existe déjà ou non).
4. si le composant n'est pas présent, créez dynamiquement un nouvel onglet et ajoutez-y le composant, puis sélectionnez cet onglet.

J'ai besoin de lignes directrices ou de meilleures pratiques pour toutes les étapes (collecte d'idées), et s'il existe des composants ou des paquets pour m'aider à y parvenir.

Edit : Pour clarifier l'exemple,

disons que j'ai une liste d'articles dans le système chargée à partir de la base de données, lorsque je veux modifier un article, je pourrai l'ouvrir dans son propre onglet. ainsi, je peux ouvrir plusieurs articles en même temps. et lorsque j'ajoute un nouvel article par le biais du nouvel onglet, je devrais également être en mesure d'ouvrir cet enregistrement dans son propre onglet. il ne s'agit pas simplement d'une liste d'onglets statiques que je veux diriger entre eux

Answer 1

La raison pour laquelle vous pensez qu'il faut se débarrasser du routage pour pouvoir utiliser la navigation par onglets n'est pas claire. La navigation par onglet et le routage ne sont pas incompatibles. Pour utiliser MatTabNavBar et MatTabLink avec le routage, configurez le routage de votre application de manière à ce que chaque "onglet" soit une route, ajoutez les options de routage aux éléments mat-tab-link et utilisez le routeur outlet pour héberger le contenu des onglets. Cela devrait être beaucoup plus facile que ce que vous avez prévu, puisque vous n'aurez pas à vous soucier de la "création" dynamique du contenu des onglets et de l'utilisation du bouton retour.

Voici une sélection de code à partir d'un exemple de base, la démo complète est sur StackBlitz :

Modèle

<nav mat-tab-nav-bar [backgroundColor]="background">
    <a mat-tab-link routerLink="test-one" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">Test One</a>
    <a mat-tab-link routerLink="test-two" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">Test Two</a>
</nav>
<router-outlet></router-outlet>

Composants

import {Component} from '@angular/core';

/**
 * @title Basic use of the tab nav bar with routing
 */
@Component({
  selector: 'tab-nav-bar-basic-example',
  templateUrl: 'tab-nav-bar-basic-example.html',
  styleUrls: ['tab-nav-bar-basic-example.css'],
})
export class TabNavBarBasicExample {}

@Component({
  selector: 'test-one',
  template: '<p>Test One</p>'
})
export class TestOne {}

@Component({
  selector: 'test-two',
  template: '<p>Test Two</p>'
})
export class TestTwo {}

Module d'application

const appRoutes: Routes = [
  { path: '', redirectTo: 'test-one', pathMatch: 'full' },
  { path: 'test-one', component: TestOne },
  { path: 'test-two', component: TestTwo }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    ),
    ...
  ],
  entryComponents: [TabNavBarBasicExample],
  declarations: [TabNavBarBasicExample, TestOne, TestTwo],
  bootstrap: [TabNavBarBasicExample],
  providers: []
})
export class AppModule { }