2016-09-14 3 views
0

Я пытаюсь вызвать маршрут с необязательным параметром.Невозможно сопоставить любые маршруты: с Query Params

Мой маршрутизатор

const appRoutes: Routes = [ 

    { path: '', redirectTo: 'bo', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'bo', component: LayoutComponent, 
     children: [ 
      { path: '' , redirectTo: 'history', pathMatch: 'full'}, 
      { path: 'history', component: HistoryComponent } , 
      { path: 'history/details:id', component: DetailsComponent } 

     ] 
    },  
]; 

Как я называю это

this.router.navigate(['./details', {id: myVarID}], { relativeTo: this.route }); 

Ошибка: не найдено маршрутов: 'бо/история/детали, идентификатор = myIdValue'

Но это работает, если я определяю его в маршрутизаторе косой чертой и назову его, вручную вставив в URL:

{ path: 'history/details/:id', component: DetailsComponent } 

Даже если я добавлю ';' вместо «/» в маршрутизаторе это не работает. Я хочу вызвать маршрут с помощью функции router.navigate!

ответ

0
{ path: 'history/details:id', component: DetailsComponent } 

изменить его,

{ path: 'history/details/:id', component: DetailsComponent } //<----need to put router param after slash 

и назвать его, как,

this.router.navigate(['/details', {id: myVarID}] 
+0

Эй! он все еще не работает, ошибка такая же. Я могу вызывать маршрут, если я вручную вставляю его с косой чертой, но функция переводит вызовы с помощью символа ';' –

0

Хорошо, так что кажется, я сделал большую путаницу.

Я хотел открыть маршрут с Параметры запроса, но без косой черты, таким образом, решение:

Маршрут:

{ path: 'history/details', component: DetailsComponent } 

Вызов:

this.router.navigate(['details', {id: myVarID}], { relativeTo: this.route }); 

/: идентификатор не здесь, поскольку параметрам запроса не предшествует косая черта и являются необязательными. Маршрут будет создан/бо/история/деталь; ID = myVarIDContents

А внутри детали компоненты я могу получить параметры запроса, как:

export class DetailsComponent implements OnInit { 

    constructor(public route: ActivatedRoute) { } 

    ngOnInit() { 
    console.log(this.route.params.value); 
    } 

}