Parâmetro de rota opcional angular 2

É possível ter um parâmetro de rota opcional na rota Angular 2? Eu tentei a sintaxe Angular 1.x no RouteConfig, mas recebi o erro abaixo:

"EXCEÇÃO ORIGINAL: Caminho" / user /: id? "Contém"? ", O que não é permitido em uma configuração de rota."

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

Você pode definir várias rotas com e sem o parâmetro:

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

e manipule o parâmetro opcional em seu componente:

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

    if (paramId) {
        ...
    }
}

Consulte também a questão relacionada ao github: https://github.com/angular/angular/issues/3525

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

Dessa forma, o componente não é renderizado novamente quando o parâmetro é adicionado.

É recomendável usar um parâmetro de consulta quando as informações são opcionais.

Parâmetros de rota ou parâmetros de consulta?

Não existe uma regra rígida. Em geral,

prefere um parâmetro de rota quando

• o valor é obrigatório.
• o valor é necessário para distinguir um caminho de rota de outro.

prefere um parâmetro de consulta quando

• o valor é opcional.
• o valor é complexo e / ou multivariável.

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

Você só precisa retirar o parâmetro do caminho da rota.

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

Angular 4 - Solução para atender à solicitação do parâmetro opcional:

FAÇA ISSO:

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

Observe que as rotas productse products/:idsão nomeadas exatamente da mesma forma. O Angular 4 seguirá corretamente productspara rotas sem parâmetro e, se um parâmetro seguirproducts/:id .

No entanto, o caminho para a rota sem parâmetro nãoproducts deve ter uma barra final; caso contrário, o angular o tratará incorretamente como um caminho de parâmetro. Então, no meu caso, eu tinha a barra final de produtos e não estava funcionando.

NÃO FAÇA ISTO:

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

A resposta de rerezz é muito boa, mas tem uma falha séria. Faz com que o Usercomponente execute novamente ongOnInit método.

Pode ser problemático quando você faz coisas pesadas lá e não deseja que seja reexecutado quando você alterna da rota não paramétrica para a paramétrica. Embora essas duas rotas tenham como objetivo imitar um parâmetro de URL opcional, não se tornem duas rotas separadas.

Aqui está o que eu sugiro para resolver o problema:

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

Em seguida, você pode mover a lógica responsável por manipular o parâmetro para o UserWithParamcomponente e deixar a lógica base no Usercomponente. O que você fizer User::ngOnInitnão será executado novamente quando você navegar de / user para / user / 123 .

Não esqueça de colocar o <router-outlet></router-outlet>no Usermodelo.

As respostas sugeridas aqui, incluindo a resposta aceita do rerezz que sugere a adição de várias entradas de rota, funcionam bem.

No entanto, o componente será recriado ao mudar entre as entradas da rota, ou seja, entre a entrada da rota com o parâmetro e a entrada sem o parâmetro.

Se você quiser evitar isso, pode criar seu próprio correspondente de rotas que corresponderá às duas rotas:

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

Em seguida, use o matcher na sua configuração de rota:

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

Com angular4, só precisamos organizar rotas juntas na hierarquia

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

Isso funciona para mim. Dessa forma, o roteador sabe qual é a próxima rota com base nos parâmetros de identificação da opção.

Deparou-se com outra instância desse problema e, ao procurar uma solução para ele, veio aqui. Meu problema era que eu fazia as crianças e carregava preguiçosamente os componentes para otimizar um pouco as coisas. Em resumo, se você estiver com preguiça de carregar o módulo pai. O principal foi o uso de '/: id' na rota e as queixas de '/' fazer parte dela. Não é o problema exato aqui, mas se aplica.

Roteamento de aplicativo do pai

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

Rotas filho carregadas preguiçosamente

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

Não posso comentar, mas em referência a: Parâmetro de rota opcional do Angular 2

uma atualização para o Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Consulte https://angular.io/api/router/ActivatedRoute para obter informações adicionais sobre o roteamento Angular6.

Enfrentando um problema semelhante com carregamento lento, eu fiz isso:

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

E então no componente:

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

Deste jeito:

• A rota sem /é redirecionada para a rota com. Por causa disso pathMatch: 'full', apenas essa rota completa específica é redirecionada.

• Então, users/:idé recebido. Se a rota real era users/, idé "", faça o check-in ngOnInite aja de acordo; caso contrário, idé o id e prossiga.

• O restante do componente atua selectedUseré indefinido (* ngIf e coisas assim).