Angular2 routeur config, préfixe pathMatch ne fonctionne pas

De ce que je comprends de Angular2 la documentation du routeur, la config des routes par défaut pathMatch stratégie de "préfixe",
"prefix" pathMatch stratégie implique l'application routeur seulement besoin de regarder le début de l'url et le faire correspondre avec la bonne route.

Référence: https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#adaptation de la stratégie

Que l'on dit, avec le ci-dessous les configurations, je suppose que cette route devrait charge ExampleComponent si je navigue à /abcdefg.

Un problème que ce n'est pas de travail, je ne suis pas sûr de ce qui est mal et je ne peux pas trouver beaucoup d'informations à ce sujet sur google ou dans les @angular/router code source.

Merci pour votre aide.

const ROUTES: Routes = [
  { path: '', component: MainLayoutComponent, pathMatch: 'prefix', canActivate: [AuthGuard], children: [
    { path:'abc', pathMatch: 'prefix', component: ExampleComponent},
    { path: '', component: HomepageComponent }
  ]},
 ];


 export const ROUTING = RouterModule.forRoot(ROUTES, { useHash: false });

Mise à jour #1, en Essayant Günter Zöchbauer suggestion.

nouveau routeur configurations sont les suivantes:

maintenant /abc/defg fonctionne, mais pas /abcdefg

{ path:'abc', pathMatch: 'prefix',
  children: [
    { path:'**', component:ExampleComponent},
  ]
}
InformationsquelleAutor Anas Al Hamdan | 2016-10-09
  1. 5

    Qui pourrait fonctionner si votre path: 'abc' route avait un enfant de route avec path: 'defg' ou path: '**' ou path: 'de' et de l'enfant en route d'un itinéraire avec path: 'fg'.

    pathMatch: 'full' signifie, que le chemin d'accès d'URL doit correspondre et est consommée par la route algorithme de mise en correspondance.

    pathMatch: 'prefix' moyen, la première route où le chemin correspond au début de l'URL est choisi, mais ensuite la route correspondant à l'algorithme se poursuit à la recherche pour la mise en correspondance de l'enfant des routes où le reste de l'URL correspond à.

    • Merci pour votre réponse, j'ai essayé ta suggestion, maintenant abc/de fonctionne, mais pas abcde, je vais mettre à jour la question, maintenant, de vous montrer les nouvelles configurations.
    • Désolé, je ne pensais pas expliquer la partie correctement. C'est seulement censé fonctionner avec abc/de mais pas avec abcde. La praxis pathMatch est seul à décider si l'itinéraire correspondant à l'algorithme doit poursuivre la recherche avec un vide chemin d'accès de l'enfant itinéraires quand '' déjà appariés sur la route parente. C'est un cas particulier car il est difficile de maintenant, si "rien" ne devrait être consommé lorsqu'elle correspond ou pas. Je ne connais pas d'autres cas d'utilisation pour pathMatch.
    InformationsquelleAutor Günter Zöchbauer
  2. 1

    Le problème est que vous êtes en train de dire : 

    { path: '', component: MainLayoutComponent, pathMatch: 'prefix'

    qui revient à dire :

    Trouver toutes les url qui commence avec rien (") et assez simplement, toutes les url de toujours commencer avec rien.

    Considérer cette url /google

    Ou cette url

    si vous exécutez une Regex et dire n'ces url match "?, oui le faire.

    À moins que vous dire de départ (^) et se terminant ($) bits doit match de trop, qui, dans ce cas, le démarrage de match pour eux deux , mais la fin ne correspond au vide de l'url.

    Qu'est ce qu'ils ont créé le full préfixe , comme pour dire , l'url doit correspondre exactement .

    InformationsquelleAutor Milad
  3. 0

    donc, quelqu'un a été de me demander comment j'ai résolu ce problème,

    d'abord, j'ai ajouté une nouvelle route comme un secours toutes les autres voies, quelque chose comme ceci:

    {path: ':url', loadChildren: './fallback/fallback.module#FallbackModule'}

    puis à l'intérieur de fallbackComponent nous de décider de ce module à charger en fonction de l'url sur le routeur de navigation à la fin de l'événement.

    dans mon cas, si l'url est /@somestring, j'ai voulu charger le profileComponent et appel de certaines Api

      ngOnInit() {
    this.router.events.filter(event => event instanceof NavigationEnd)
      .subscribe((event) => {
        this.parseUrl(this.router.url);
      });
  }

  parseUrl(url: string) {
    let data = {};
    let parts: string[] = url.split('/');
    parts = parts.filter((item) => !!item);
    if (parts[0] && parts[0].indexOf('@') === 0) {
      data['component'] = 'profile';
      data['username'] = parts[0].replace('@', '');
    }
    this.viewData = data;
  }

    et dans le modèle:

    <template [ngIf]="viewData && viewData['component'] == 'profile'">
  <user-profile
    [title] = "viewData['view']"
    [username] = "viewData['username']"
  ></user-profile>
</template>

    également intéressant de mentionner que nous avons également eu à remplacer DefaultUrlSerializer.sérialiser la désactivation de l'auto de codage des caractères spéciaux (@) dans les url.

    InformationsquelleAutor Anas Al Hamdan