Des voies différentes d'un même composant

Je veux arriver à quelque chose comme ceci /products montre tous les produits et /products/:category montre tous les produits liés à une catégorie spécifique. De réaliser que j'ai les itinéraires suivants:

const productsRoutes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      {
        path: '',
        component: ProductsListComponent,
      },
      {
        path: ':category',
        component: ProductsListComponent
      }
    ]
  }
];

Problème

Quand je switch entre les catégories, tout est très bien, quand je switch entre tous les produits et les produits de la catégorie, et vice-versa, Angulaire redessine les composants et il y a un scintillement.

Angulaire 2 Routeur version finale ne dispose pas de Regex,pour que je sache. Il y a une chose que je suis absent, ou pour l'instant c'est la seule solution?

Pour ce cas, la chose la plus proche que j'ai pu trouver est celui là: stackoverflow.com/questions/41899090/... Il est le genre de scénario similaire ici: stackoverflow.com/a/41931088/2911817

OriginalL'auteur Fabio Antunes | 2016-09-28

  1. 6

    vous pouvez le résoudre par l'ajout de routes

    const routes: Routes = [
    { path: 'experience',
        children: [
            { path: 'pending', component: ExperienceComponent },
            { path: 'requests', component: ExperienceComponent },
        ] }]

    et dans ExperienceComponent importation 

    import { ActivatedRoute } from "@angular/router";

    et dans le constructeur d'ajouter ce paramètre

    constructor(public route: ActivatedRoute)

    et à l'intérieur du constructeur d'obtenir l'url

    this.route.url.subscribe(params => {
  console.log(params[0].path);
})
    Cela a fonctionné pour moi et puis de comprendre le chemin que j'ai fini, j'ai utilisé le ActivateRoute avec si ce.l'itinéraire.de l'instantané.routeConfig.chemin d'accès == 'en attente')

    OriginalL'auteur Mohamed Abo Elmagd

  2. 5

    Je ne sais pas si il y a une autre façon de faire cela, mais j'ai réussi à le faire fonctionner à l'aide de la suite de hack.

    export const productsRoutes: Route[] = [
    {
        path: 'products',
        component: ProductsComponent,
        children: [
            {
                path: '',
                pathMatch: 'prefix',
                component: ProductsListComponent,
                children: [
                    {
                        path: '',
                        component: EmptyComponent,
                    },
                    {
                        path: ':category',
                        component: EmptyComponent,
                    },
                ],
            },
        ],
    },
];

    EmptyComponent:

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

@Component({
    selector: 'GemainEmpty',
    template: '<router-outlet></router-outlet>',
})
export class EmptyComponent {
}

    Gérer les modifications d'itinéraire sur le ListComponent:

    ngOnInit() {
    this.routerEventsSubscription = this.router.events.subscribe((evt) => {
        if (!(evt instanceof NavigationEnd)) {
            return;
        }
        //Code to reload/filter list
    }
}

    Et ajouter un routeur de sortie sur le ListComponent modèle.

    OriginalL'auteur Guilherme Meireles

  3. 3

    Vous pouvez également définir une redirection vers un chemin d'accès spécifique:

    { path: '**', redirectTo: '/home', pathMatch: 'full' },

    où /home est la voie que vous souhaitez rediriger vers.

    path: '**' résout tous les chemins qui ne sont pas définis

    Les chemins sont vérifiées dans l'ordre où elles sont définies. Ainsi, le ** chemin devrait être DERNIÈRE, ou stratégiquement placés.

    OriginalL'auteur Flosut Mözil