Winkel 2 optionaler Routenparameter

Ist es möglich, einen optionalen Routenparameter in der Angular 2-Route zu haben? Ich habe die Angular 1.x-Syntax in RouteConfig ausprobiert, aber die folgende Fehlermeldung erhalten:

"ORIGINAL EXCEPTION: Path" / user /: id? "Enthält"? ", Was in einer Routenkonfiguration nicht zulässig ist."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

Sie können mehrere Routen mit und ohne Parameter definieren:

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

und behandeln Sie den optionalen Parameter in Ihrer Komponente:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

Siehe auch das zugehörige Github-Problem: https://github.com/angular/angular/issues/3525

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

Auf diese Weise wird die Komponente beim Hinzufügen des Parameters nicht erneut gerendert.

Es wird empfohlen, einen Abfrageparameter zu verwenden, wenn die Informationen optional sind.

Routenparameter oder Abfrageparameter?

Es gibt keine feste Regel. Allgemein,

bevorzugen Sie einen Routenparameter, wenn

• Der Wert ist erforderlich.
• Der Wert ist erforderlich, um einen Routenpfad von einem anderen zu unterscheiden.

bevorzugen Sie einen Abfrageparameter, wenn

• Der Wert ist optional.
• Der Wert ist komplex und / oder vielfältig.

von https://angular.io/guide/router#optional-route-parameters

Sie müssen nur den Parameter aus dem Routenpfad entfernen.

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

Winkel 4 - Lösung zur Adressierung der Reihenfolge des optionalen Parameters:

MACH DAS:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

Beachten Sie, dass die Routen productsund products/:idgenau gleich benannt sind. Winkel 4 folgt korrekt productsfür Routen ohne Parameter, und wenn ein Parameter folgtproducts/:id .

Der Pfad für die Nicht-Parameter-Route productsdarf jedoch keinen abschließenden Schrägstrich enthalten, da sonst Angular ihn fälschlicherweise als Parameterpfad behandelt. In meinem Fall hatte ich also den nachgestellten Schrägstrich für Produkte und es funktionierte nicht.

TUN SIE DAS NICHT:

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

Die Antwort von rerezz ist ziemlich nett, hat aber einen schwerwiegenden Fehler. Dadurch Userwird die ngOnInitMethode von der Komponente erneut ausgeführt .

Es kann problematisch sein, wenn Sie dort schwere Aufgaben ausführen und nicht möchten, dass diese erneut ausgeführt werden, wenn Sie von der nicht parametrischen zur parametrischen Route wechseln. Obwohl diese beiden Routen einen optionalen URL-Parameter imitieren sollen, werden sie nicht zu zwei separaten Routen.

Folgendes schlage ich vor, um das Problem zu lösen:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

Dann können Sie die Logik verantwortlich für den Umgang mit dem param auf die bewegen UserWithParamKomponente und lassen Sie die Basis - Logik in der UserKomponente. Was auch immer Sie tun, User::ngOnInitwird nicht erneut ausgeführt, wenn Sie von / user zu / user / 123 navigieren .

Vergessen Sie nicht, das <router-outlet></router-outlet>in die UserVorlage des ' zu setzen .

Die hier vorgeschlagenen Antworten, einschließlich der akzeptierten Antwort von rerezz das Hinzufügen mehrerer vorschlägt, funktionieren .

Die Komponente wird jedoch neu erstellt, wenn zwischen den Routeneinträgen gewechselt wird, dh zwischen dem Routeneintrag mit dem Parameter und dem Eintrag ohne Parameter.

Wenn Sie dies vermeiden möchten, können Sie einen eigenen Routen-Matcher erstellen, der beiden Routen entspricht:

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

Verwenden Sie dann den Matcher in Ihrer Routenkonfiguration:

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

Mit angle4 müssen wir nur Routen in Hierarchien zusammen organisieren

const appRoutes: Routes = [
  { 
    path: '', 
    component: MainPageComponent 
  },
  { 
    path: 'car/details', 
    component: CarDetailsComponent 
  },
  { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
  },
  { 
    path: 'car/details/:id', 
    component: CadDetailsComponent 
  },
  { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
  }
];

Das funktioniert bei mir. Auf diese Weise weiß der Router anhand der Options-ID-Parameter, welche Route die nächste ist.

Bin auf eine andere Instanz dieses Problems gestoßen und auf der Suche nach einer Lösung hierher gekommen. Mein Problem war, dass ich die Kinder machte und auch die Komponenten faul lud, um die Dinge ein wenig zu optimieren. Kurz gesagt, wenn Sie faul sind, laden Sie das übergeordnete Modul. Hauptsache, ich habe '/: id' in der Route verwendet und es gibt Beschwerden darüber, dass '/' ein Teil davon ist. Nicht das genaue Problem hier, aber es gilt.

App-Routing vom übergeordneten Element

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

Kinderrouten faul geladen

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

Ich kann nicht kommentieren, aber in Bezug auf: Angular 2 optionaler Routenparameter

ein Update für Angular 6:

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

Weitere Informationen zum Angular6-Routing finden Sie unter https://angular.io/api/router/ActivatedRoute .

Bei einem ähnlichen Problem mit dem verzögerten Laden habe ich Folgendes getan:

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

Und dann in der Komponente:

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

Diesen Weg:

• Die Route ohne /wird auf die Route mit umgeleitet. Aufgrund dessen pathMatch: 'full'wird nur eine solche spezifische vollständige Route umgeleitet.

• Dann users/:idwird empfangen. Wenn die tatsächliche Route war users/, idist "", checken Sie sie ein ngOnInitund handeln Sie entsprechend. Ansonsten idist die ID und fahren Sie fort.

• Der Rest der Komponente, auf die einwirkt, selectedUserist undefiniert oder nicht (* ngIf und ähnliche Dinge).