Это мои маршруты:
app.module.tsconst appRoutes: Routes = [
{ path: 'menu', component: MenuViewComponent,
children: [
{ path: ':name', component: MenuViewComponent,
children: [
{ path: ':name', component: MenuViewComponent ,
children: [
{ path: ':name', component: MenuViewComponent }
]
}
]
}
]
},
{ path: '', component: LandingViewComponent},
{ path: '**', component: PageNotFoundViewComponent }
];
У меня есть служба, которая возвращает эту структуру данных, используемую для создания моего меню
[
"name" : "root1",
"children" : [
"name" : "folder1",
"children" : [
"name" : "folder1_item1"
],
"name" : "folder2",
"children" : [
"name" : "folder2_item1"
]
],
"name" : "root2",
"children" : [
"name" : "folder3",
"children" : [
"name" : "folder3_item1"
],
"name" : "folder4",
"children" : [
"name" : "folder4_item1"
]
]
]
Внутри моего MenuViewComponent у меня есть метод onInit, который проходит через дочерние элементы маршрута и создает переменные имени в качестве пути.
menu-view.component.tsngOnInit() {
var path : string[] = [];
var cont = this.route;
var index : number = 0;
do
{
cont.params.subscribe( params => {
if(params)
path[index] = params['name'];
});
index++;
cont = cont.firstChild;
}
while(cont);
this.myservice.getMenuItems(path).then(menuItems => this.menuCards = menuItems);
}
Этот массив путей отправляется как параметр в мой метод пунктов меню получателя, который будет проходить через дерево и возвращать узел меню и его дочерние элементы для этого пути.
Меню MenuViewComponent использует ngFor для отображения n числа элементов MenuCardComponents. Каждая ссылка на другое меню, если у них есть дети с помощью кнопки и атрибута routerLink.
Он не кажется угловатым, будет обновлять MenuViewComponent, когда я нажимаю на одну из кнопок. Он обновит URL-адрес в адресной строке, но экран не обновится. Если я вручную заберу каждый URL-адрес (например: foo.com/menu/root1/folder1), он отобразит правильные варианты меню, просто я не могу понять, как сделать маршрут работой с ссылками на кнопки.
По моему мнению, мне нужно как-то переустановить MenuViewComponent. Но я не знаю, как это сделать.
Любая помощь будет оценена по достоинству.
Так вот что я в итоге сделал:
app.module.tsconst appRoutes: Routes = [
{ path: 'menu/:name1/:name2/:name3', component: MenuViewComponent },
{ path: 'menu/:name1/:name2', component: MenuViewComponent },
{ path: 'menu/:name1', component: MenuViewComponent },
{ path: 'menu', component: MenuViewComponent },
{ path: '', component: LandingViewComponent},
{ path: '**', component: PageNotFoundViewComponent }
];
menu-view.component.ts ngOnInit() {
this.route.paramMap.switchMap((params: ParamMap) => {
this.path = [];
if(params.get('name1'))
{
this.path[0] = params.get('name1');
if(params.get('name2'))
{
this.path[1] = params.get('name2');
if(params.get('name3'))
{
this.path[2] = params.get('name3');
}
}
}
return this.menuService.getMenuItem(this.path);
})
.subscribe((menuNode: MenuCard[]) => this.menuCards = menuNode);
}
Я бы предпочел не называть каждый уровень по-разному (например, name1, name2, name3), и это все еще не самый эффективный код там, я бы предпочел что-то более динамичное и способен обрабатывать N количество вариантов меню. Но он работал на то, что мне нужно прямо сейчас.