Угловой маршрутизатор с дочерними элементами одного и того же компонента

Question

Угловой маршрутизатор с дочерними элементами одного и того же компонента

1

Это мои маршруты:

app.module.ts

const 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.ts

ngOnInit() {

    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. Но я не знаю, как это сделать.

Любая помощь будет оценена по достоинству.

Curtis 03 авг. 2017, в 20:59

Источник

Теги:

angular

javascript

routing

1 ответ

Ещё вопросы

Curtis · Accepted Answer · 2017-08-08T13-19-00.000Z

Так вот что я в итоге сделал:

app.module.ts

const 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 количество вариантов меню. Но он работал на то, что мне нужно прямо сейчас.

Вы можете использовать некоторые типы дополнительных параметров вместо обязательных параметров. Затем можно было бы добавить любое количество параметров без необходимости указывать их все в конфигурации маршрута. См. Этот пост для получения дополнительной информации: stackoverflow.com/questions/44864303/…