Parâmetro de rota opcional angular 2

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

“EXCEÇÃO ORIGINAL: Caminho” / usuário /: id? “Contém”? “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 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) { ... } } 

Veja também o problema relacionado ao github: https://github.com/angular/angular/issues/3525

Recomenda-se usar um parâmetro de consulta quando as informações forem opcionais.

parameters de rota ou parâmetros de consulta?

Não há regra rígida. Em geral,

prefira um parâmetro de rota quando

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

prefira um parâmetro de consulta quando

  • o valor é opcional.
  • o valor é complexo e / ou multivariado.

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

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

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

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

Angular 4 – Solução para endereçar a ordem do parâmetro opcional:

FAÇA ISSO:

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

Observe que os products e products/:id rotas de products/:id são nomeadas exatamente da mesma maneira. Angular 4 seguirá corretamente os products para rotas sem parâmetro, e se um parâmetro seguirá os products/:id .

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

NÃO FAÇA ISSO:

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

Com o 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. Desta forma, o roteador sabe qual é a próxima rota com base nos parâmetros do ID da opção.

A resposta do rerezz é bem legal, mas tem uma falha séria. Faz com que User componente User execute ngOnInit método ngOnInit .

Pode ser problemático quando você faz algumas coisas pesadas lá e não quer que ele seja executado novamente quando você muda da rota não paramétrica para a paramétrica. Embora essas duas rotas sejam destinadas a imitar um parâmetro de url opcional, não se torne 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 componente UserWithParam e deixar a lógica base no componente User . O que quer que você faça em User::ngOnInit não será executado novamente quando você navegar de / user para / user / 123 .

Não se esqueça de colocar o no template do User .

Corri para outro exemplo desse problema e, ao procurar uma solução, veio para cá. Meu problema era que eu estava fazendo as crianças e o carregamento preguiçoso dos componentes também para otimizar as coisas um pouco. Em suma, se você está carregando lento o módulo pai. A principal coisa era usar ‘/: id’ na rota, e é uma reclamação sobre ‘/’ fazer parte dela. Não é exatamente o problema aqui, mas se aplica.

App-roteamento 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 filhas preguiçosas carregadas

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