Angular2: Faire la route des chemins de casse

J'ai la suite de la configuration du routage.

@RouteConfig([
    {
        path: '/home',
        name: 'Homepage',
        component: HomepageComponent,
        useAsDefault: true
    }
)
export class AppComponent {
}

chaque fois que le navigateur est pointé /home cet itinéraire fonctionne, mais pas pour /Home ou de tout autre cas de variations. Comment puis-je faire le routeur en route pour le composant sans s'occuper de l'affaire.

grâce

  • Savez-vous si il y a un sujet ouvert sur ce point? Semble que ce doit être cuit dans le nouveau routeur. L'angle de 1 routeur avait caseInsensitiveMatch=true.
InformationsquelleAutor Deena | 2016-03-22
  1. 35

    Voici ce que j'ai fait.

    import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        //Optional Step: Do some stuff with the url if needed.

        //If you lower it in the optional step 
        //you don't need to use "toLowerCase" 
        //when you pass it down to the next function
        return super.parse(url.toLowerCase()); 
    }
}

    Et

    @NgModule({
    imports: [
      ...
    ],
    declarations: [AppComponent],
    providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],
    bootstrap: [AppComponent]
})
    • Le deuxième bloc de code d'afficher les modifications apportées à votre application.module? J'ai essayé cela, et j'obtiens une erreur: Impossible de lire la propriété "sérialiser" de null. Tout se compile correctement, et si je prends le code de retour, tout fonctionne correctement.
    • Brian c'est exactement la façon dont je l'utilise encore aujourd'hui sans problèmes. Me semble qu'il n'est pas d'injecter de l'Sérialiseur correctement. Sérialiser est une méthode de la DefaultSerializer - angulaire.io/docs/js/latest/api/routeur/index/... Pouvez-vous faire un Plunker?
    • J'ai essayé de nouveau, et il fonctionne à merveille jusqu'à présent. Pas sûr de ce qui a de mal la première fois, mais il semble fonctionner maintenant. Merci beaucoup.
    • J'ai dû ajouter les éléments suivants à l'importation au-dessus de la @NgModule: importer { UrlSerializer, DefaultUrlSerializer } à partir de '@angulaire/routeur;
    • Cela ne fonctionne pas pour moi lors de l'utilisation de routerLink et j'ai mis des majuscules, comme par exemple les routerLink="la Maison", mais si j'entre l'adresse de l'url du navigateur, directement comme /Home il fonctionne
    • Remarque importante: vous devez l'ajouter aux fournisseurs de services de la racine de votre application module et le module uniquement(pas de point de l'ajouter aux autres)
    • Un mot de prudence en utilisant cette sérialiser, si vous ajoutez tous les jetons tels que l'identité des jetons de cela minuscules de causer entre eux de ne pas fonctionner correctement tant que l'url en entier est affecté.
    • J'ai mis à jour la réponse.
    • il ne manque plus qu'une logique de gestion de l'url contient des paramètres de chaîne de requête. J'ai ajouté la logique de la manière suivante. const urlParts = url.split('?'); urlParts[0] = urlParts[0].toLowerCase(); // Si vous le baisser à l'étape facultative // vous n'avez pas besoin d'utiliser "toLowerCase" // lorsque vous passez à la prochaine fonction return super.parse(urlParts.join('?'));

    InformationsquelleAutor DimitarKostov
  2. 8

    mise à jour

    Ce ne pas le faire dans le nouveau routeur encore

    original

    Regex de rapprochement ont été introduites récemment. Cela peut vous aider pour votre cas d'utilisation.

    Voir https://github.com/angular/angular/pull/7332/files

    Et ce Plunker de Brandon Roberts

    @RouteConfig([
  { name : 'Test',
    //path : '/test',
    regex: '^(.+)/(.+)$', 
    serializer: (params) => new GeneratedUrl(`/${params.a}/${params.b}`, {c: params.c}),
    component: Test
//  useAsDefault: true
  }
])
    • N'expression régulière correspondant à un chemin prédéfini a des avantages par rapport à caseInsensitiveMatch: true comme l'a suggéré quelqu'un sur commentaires? Juste demander, car il fonctionne très bien sans des modifications supplémentaires.
    • N'avez pas utilisé moi-même encore. Viens de me rappeler que cela a été introduit récemment. Où était caseInsensitiveMatch: true mentionné? N'ai pas vu encore.
    • le commentaire a été supprimé.
    • Serait intéressant de savoir ce que le downvoters n'aiment pas à propos de la réponse...
    • Je suis d'accord gunter, il semble que la caseInsensitiveMatch est une partie de l'ancien routeur en angular2/routeur - le nouveau routeur @angulaire/routeur n'a pas encore
    InformationsquelleAutor Günter Zöchbauer
  3. 7

    Je l'ai fait dans mon application.composante.ts:

    export class AppComponent implements OnInit {
  constructor(private _route: Router) { }
  public ngOnInit() {
    this._route.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        let url = (<NavigationStart>event).url;
        if (url !== url.toLowerCase()) {
          this._route.navigateByUrl((<NavigationStart>event).url.toLowerCase());
        }
      }
    });
  }
}

    et ce qui est nécessaire sur le routeur-lien de la rendre active lorsqu'elle est sélectionnée:

    <a routerLink="/heroes" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">Heroes</a>
    InformationsquelleAutor Aran Dekar
  4. 7

    Un petit correctif à Timothy réponse, qui ne modifie pas le cas de correspondance des noms de paramètres et de valeurs:

    import {Route, UrlSegment, UrlSegmentGroup} from '@angular/router';

export function caseInsensitiveMatcher(url: string) {
  return function(
    segments: UrlSegment[],
    segmentGroup: UrlSegmentGroup,
    route: Route
  ) {
    const matchSegments = url.split('/');
    if (
      matchSegments.length > segments.length ||
      (matchSegments.length !== segments.length && route.pathMatch === 'full')
    ) {
      return null;
    }

    const consumed: UrlSegment[] = [];
    const posParams: {[name: string]: UrlSegment} = {};
    for (let index = 0; index < matchSegments.length; ++index) {
      const segment = segments[index].toString().toLowerCase();
      const matchSegment = matchSegments[index];

      if (matchSegment.startsWith(':')) {
        posParams[matchSegment.slice(1)] = segments[index];
        consumed.push(segments[index]);
      } else if (segment.toLowerCase() === matchSegment.toLowerCase()) {
        consumed.push(segments[index]);
      } else {
        return null;
      }
    }

    return { consumed, posParams };
  };
}

    Modifier: outre le problème est expliqué ci-dessus, il y a un autre bug subtil qui est résolu maintenant. Pour la boucle doit itérer sur matchSegments au lieu de segments.

    • Cela ressemble à une possible solution à mon problème. Je voudrais essayer dans mon angulaire de l'application, par l'exportation de cette méthode dans une commune.le module.ts. Peut-être alors référencé dans l'application.le module.ts? et tout enfant module où j'ai des enfants route de configuration? Je suis un tapuscrit novice, donc veuillez pardonner mon ignorance.
    • vous pouvez l'utiliser soit en RouterModule.forRoot(...) comme indiqué dans le Timothy réponse, ou dans une définition de la route.
    InformationsquelleAutor Alireza Mirian
  5. 5

    Remarque: Les ouvrages suivants Angulaire 4.x

    Je viens d'utiliser un comparateur de fonction:

    import { RouterModule, UrlSegment, UrlSegmentGroup, Route } from '@angular/router';

function CaseInsensitiveMatcher(url: string) {
    url = url.toLowerCase();

    return function(
        segments: UrlSegment[],
        segmentGroup: UrlSegmentGroup,
        route: Route
    ) {
        let matchSegments = url.split('/');
        if (
            matchSegments.length > segments.length ||
            (matchSegments.length !== segments.length && route.pathMatch === 'full')
        ) {
            return null;
        }

        let consumed: UrlSegment[] = [];
        let posParams: {[name: string]: UrlSegment} = {};
        for (let index = 0; index < segments.length; ++index) {
            let segment = segments[index].toString().toLowerCase();
            let matchSegment = matchSegments[index];

            if (matchSegment.startsWith(':')) {
                posParams[matchSegment.slice(1)] = segments[index];
                consumed.push(segments[index]);
            }
            else if (segment === matchSegment) {
                consumed.push(segments[index]);
            }
            else {
                return null;
            }
        }

        return { consumed, posParams };
    }
}

    Avec:

    @NgModule({
    imports: [
        ...
        RouterModule.forRoot([
            { matcher: CaseInsensitiveMatcher('user/:id'), component: ProfileComponent },
        ])
    ],
    declarations: [
        ...
    ],
    bootstrap: [
        AppComponent
    ]
})

    Edit: je viens de découvrir que pour travailler avec AoT compilation, l' @NgModule pourrait ressembler à ceci:

    export function profileMatch() {
    return CaseInsensitiveMatcher('user/:id').apply(this, arguments);
}

@NgModule({
    imports: [
        ...
        RouterModule.forRoot([
            { matcher: profileMatch, component: ProfileComponent },
        ])
    ],
    declarations: [
        ...
    ],
    bootstrap: [
        AppComponent
    ]
})
    • Merci, ça fonctionne, mais il convertit également les noms et valeurs de paramètres de bas-de-casse qui peuvent être gênants. Par exemple, si vous définissez le chemin d'accès comme users/:userId, l'identifiant sera undefined en route. J'ai ajouté un correctif pour ce problème.
    InformationsquelleAutor Timothy Zorn
  6. 2

    Ma solution de contournement pour ce problème:

    /* IMPORTS */

let routeEntries = [
    { path: '/home', component: HomePage }
    /* DEFAULT ROUTE */
    { path: '/', component: HomePage },
    /* NOT FOUND ROUTE */
    { path: '*', component: HomePage }
];

@Component(/* SETUP */)
@Routes(routeEntries)

export App implements OnInit {
    /* STUFF */
    ngOnInit() {
        //subscribe to router changes
        this.router.changes.forEach(() => {
            let routerLink = location.pathname;
            let routerLinkLower = routerLink.toLowerCase();
            //if the route does not exist, check for the lowercase version
            if (!routeEntries.find((route) => { return route.path === routerLink; })) {
                this.router.navigate([routerLinkLower]);
            }
            //if the route is correct, set the active page
            else {
                //do something here if required
            }
        });
    }
}

    Cela fonctionne avec la RC1 routeur et va bien avec la route des variations, par exemple: 

    '{domain}:{port}/HoMe'
'{domain}:{port}/homE'
'{domain}:{port}/Home'
...
    • Qu'advient-il de vos paramètres de route? Sont-ils convertis en minuscules ainsi?
    • Ouais, je ne l'ai pas en tenir compte, les routes ne sont pas réellement un problème dans l'application développée ci-dessus pour être honnête, je n'ai donc pas le prendre en compte. Donc oui, malheureusement, il ne semble pas couvrir tous les cas.
    InformationsquelleAutor Vlad Jerca
  7. -4

    C'est comment j'ai résolu ce problème

        { path: '/home', redirectTo: ['/Home'] },
    { path: '/Home', component: HomeComponent, name: 'Home' },
    • Malheureusement, cela ne marche pas à résoudre les chemins de la racine, j'.e lorsque la base href n'est pas vide. Dans ce cas, la base href est sensible à la casse. Cant vraiment comprendre en général pourquoi l'url doit être sensible à la casse...
    • Si vous avez besoin de passer un identifiant unique dans le chemin de l'URL, puis la différence entre a et A est en effet très important. Avec cela à l'esprit, il est difficile pour un générique d'un routeur pour savoir quelles pièces doivent être sensibles à la casse et ceux qui ne le sont pas.
    • Yup, j'imagine que. Le problème, comme je vois, c'est si on utilise ng2 comme une partie d'un plus grand .net application de base par exemple. Ce qui signifie que les url en partie à la casse, et en partie à la casse (qui d'instinct se sent de mauvais goût).
    InformationsquelleAutor JohnnBlade