Angular2: Make route Pfade mit groß-und Kleinschreibung

Habe ich die folgenden routing-Konfiguration.

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

wenn der browser zeigte /home diese route funktioniert, aber nicht für /Home oder jedem anderen Falle Variationen. Wie kann ich den router weiterleiten an die Komponente, die ohne Pflege der Fall ist.

Dank

Wissen Sie, ob es ist eine offene Frage dazu? Scheint, wie dieses, sollte gebacken werden in den neuen router. Die Winkel-1 router hatte caseInsensitiveMatch=true.

InformationsquelleAutor Deena | 2016-03-22

angular angular2-routing

34

Hier ist was ich getan habe.
```
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()); 
    }
}
```
Und
```
@NgModule({
    imports: [
      ...
    ],
    declarations: [AppComponent],
    providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],
    bootstrap: [AppComponent]
})
```
Funktioniert der zweite code-block zeigt änderungen an Ihrer app.Modul? Ich habe dies versucht, und ich bekomme eine Fehlermeldung: Cannot read property 'serialisieren' null. Alles richtig kompiliert, und wenn ich den code wieder raus, funktioniert alles einwandfrei.
Brian dies ist die genaue Art, wie ich es auch jetzt ohne Probleme. Wie es scheint, ist nicht die Injektion der Serializer richtig. Serialisieren ist eine Methode, die DefaultSerializer - Winkel.io/docs/js/latest/api/router/index/... Können Sie eine Plunker?
Ich habe versucht, dies wieder, und es funktioniert wunderbar so weit. Nicht sicher, was Los war das erste mal, aber es scheint zu funktionieren jetzt. Dank so viel.
Ich musste fügen Sie die folgenden import über die @NgModule: import { UrlSerializer, DefaultUrlSerializer } '@eckig/router';
Ich aktualisierte die Antwort.

InformationsquelleAutor DimitarKostov
8

update

Dieser hatte es nicht in den neuen router noch

original

Regex-Matcher wurden kürzlich eingeführt. Dies könnte helfen, für Ihren Fall.

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

Und diese Plunker von Brandon Roberts
```
@RouteConfig([
  { name : 'Test',
    //path : '/test',
    regex: '^(.+)/(.+)$', 
    serializer: (params) => new GeneratedUrl(`/${params.a}/${params.b}`, {c: params.c}),
    component: Test
//  useAsDefault: true
  }
])
```
Tut regex-matching für einen vordefinierten Pfad hat keine Vorteile gegenüber caseInsensitiveMatch: true wie vorgeschlagen von jemandem auf Kommentare? Frage nur, weil es Super funktioniert, ohne zusätzliche änderungen.
Habe nicht alle selber noch. Erinnerte mich gerade, dass dieser eingeführt wurde vor kurzem. Wo war caseInsensitiveMatch: true erwähnt? Noch nicht gesehen bisher.
der Kommentar wurde gelöscht.
Wäre interessant zu wissen, was die downvoters nicht darüber, wie die Antwort...
Ich Stimme gunter zu, es sieht aus wie die caseInsensitiveMatch ist Teil der alten router in angular2/router - der neue router in @eckig/router nicht über diese noch

InformationsquelleAutor Günter Zöchbauer

Habe ich diese in meiner app.Komponente.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());
        }
      }
    });
  }
}

Bedarf auf router-link, um es aktiv, wenn ausgewählt:

<a routerLink="/heroes" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">Heroes</a>

InformationsquelleAutor Aran Dekar

Ist eine kleine Korrektur zu Timothy ' s Antwort, die sich nicht ändern, den Fall der übereinstimmenden parameter-Namen und Werte:

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 };
  };
}

Bearbeiten: neben dem problem oben erklärt, es gibt einen anderen subtilen bug, ist jetzt behoben. Die for-Schleife iteriert über matchSegments statt segments.

Das sieht aus wie eine mögliche Lösung für mein problem. Ich möchte versuchen, diese in meinem angular app, exportieren Sie diese Methode in eine gemeinsame.- Modul.ts. Könnte sein, dass dann auf die in der app.- Modul.ts? und jedes Kind ein Modul, wo ich Kind-route-Konfiguration? Ich bin ein Typoskript Anfänger, also bitte entschuldigt meine Unwissenheit.
Sie können entweder verwenden Sie es entweder in RouterModule.forRoot(...) wie bereits in Timothy s Antwort, oder in einem bestimmten route definition.

InformationsquelleAutor Alireza Mirian

Hinweis: folgende Werke im Winkel 4.x

Benutze ich nur ein matcher-Funktion:

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 };
    }
}

Mit:

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

Edit: ich habe gerade herausgefunden, dass in Bezug auf die Arbeit mit AoT-Kompilation, die @NgModule Teil wäre mehr wie folgt Aussehen:

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

@NgModule({
    imports: [
        ...
        RouterModule.forRoot([
            { matcher: profileMatch, component: ProfileComponent },
        ])
    ],
    declarations: [
        ...
    ],
    bootstrap: [
        AppComponent
    ]
})

Vielen Dank, es funktioniert, aber es wandelt auch die Parameternamen und-Werte in Kleinbuchstaben, das kann lästig sein. Zum Beispiel, wenn Sie den Pfad definieren, wie users/:userId userId wird undefined in der route. Ich fügte hinzu, eine Lösung für dieses Problem.

InformationsquelleAutor Timothy Zorn

Mein workaround für dieses Problem:

/* 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
            }
        });
    }
}

Dies funktioniert mit der RC1-router und geht entlang gut mit der Strecke Variationen, wie zB:

'{domain}:{port}/HoMe'
'{domain}:{port}/homE'
'{domain}:{port}/Home'
...

Was passiert, um Ihre Parameter der route? Kommen Sie in Kleinbuchstaben umgewandelt?
Ja, ich habe nicht diejenigen in Betracht, die Routen sind nicht wirklich ein problem in der Anwendung entwickelt, die die oben ehrlich zu sein, so ich nicht, die Rechnung zu tragen. Also ja, leider scheint es, dass nicht alle Fälle abdecken kann.

InformationsquelleAutor Vlad Jerca

-4

Dies ist, wie ich das Problem behoben
```
    { path: '/home', redirectTo: ['/Home'] },
    { path: '/Home', component: HomeComponent, name: 'Home' },
```
Leider ist diese nicht lösen root-Pfade, ich.e, wo der base-href ist nicht leer. In diesem Fall, die base-href ist groß-und Kleinschreibung. Kann wirklich verstehen, im Allgemeinen, warum die urls werden muss-und Kleinschreibung...
Wenn Sie brauchen, um passieren eine eindeutige Kennung in der URL Weg, dann wird der Unterschied zwischen a und A ist sehr wichtig. Mit diesem im Verstand, ist es schwierig für eine generische router wissen, welche Stücke sollten groß-und Kleinschreibung und welche nicht.
Yup, das kann ich mir vorstellen. Die Frage ist, wie ich sehe, ist, wenn man die Verwendung ng2 als Teil eines größeren .net-core-Anwendung zum Beispiel. Das bedeutet, dass die urls werden teilweise groß-und Kleinschreibung und teilweise mit groß-und Kleinschreibung (das instinktiv fühlt, geschmacklos).

InformationsquelleAutor JohnnBlade

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.