Angular 7 Перейдите к parent /: idChildroute / childroute, вызовите данные в соответствии с маршрутом от службы - PullRequest
Новая
       38

Angular 7 Перейдите к parent /: idChildroute / childroute, вызовите данные в соответствии с маршрутом от службы

0 голосов
/ 21 февраля 2019

У меня есть компонент с прокручиваемым списком для навигации, в котором есть еще 5 компонентов, которые отображают различную информацию для выбранного элемента списка, например: когда я нажимаю на элемент списка, он открывает компонент с угловым матом материала-tab-group, есть 5 вкладок, и у каждой есть выход маршрутизатора.Эти компоненты вкладок должны отображать различные части информации о данных, вызванной щелчком по элементу списка, более того, если я вставлю 

http://localhost:4200/audit/tabset/123/main

, он должен соответствующим образом извлечь данные этого маршрута.маршруты приложения должны выглядеть примерно так: 

{
        path: 'audit', component: NavComponent,
        children: [
            { path: '', redirectTo: 'tabset', pathMatch: 'full' },
            {
                path: 'tabset', component: TabsetComponent,
                children: [
                    { path: '', redirectTo: 'Main', pathMatch: 'full' },
                    { path: '/:id/main', component: WorkOrderDetailComponent },
                    { path: '/:id/feed', component: FeedComponent },
                    { path: '/:id/operations', component: AuditformsmainComponent },
                    { path: '/:id/associated', component: AssociatedComponent },
                    { path: '/:id/settings', component: SettingsComponent },
                ]
            },
            { path: 'new-work-order', component: NewWorkOrderComponent },

        ]
    },

Как мне этого добиться?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Вы можете использовать ActivatedRoute или ActivatedRouteSnapshot, чтобы найти params текущего активированного маршрута.Затем вы можете передать необходимый параметр в ваш сервисный метод для получения правильной информации.Вот соответствующая угловая документация:

Активированный маршрут

0 голосов
/ 21 февраля 2019

В каждом из ваших дочерних компонентов, например, для: main, feed, операций и т. Д., Сделайте следующее:

1) Импорт ActivatedRoute из @angular/router

2) Inject ActivatedRoute в вашем конструкторе 

constructor(private route: ActivatedRoute){}

3) Убедитесь, что класс вашего компонента реализует OnInit.Затем, в вашем методе ngOnInit, сделайте следующее, чтобы получить идентификатор: 

ngOnInit() {
  this.route.paramMap.subscribe(
  (params: ParamMap) => {
    this.id = params.get('id');
  }
 )
}

4) Затем у вас будет идентификатор текущего продукта / элемента в this.id.Затем вы можете загрузить данные, используя это.

Дайте мне знать, если это поможет:)

...