Как мне перемещаться по различным дочерним компонентам внутри матовой вкладки? (не в основной розетке)

Мой AppComponent содержит боковую навигацию и маршрутизатор. Каждый пункт меню позволяет мне переходить к другой функции. Каждый функциональный модуль состоит из четырех основных компонентов:

  • компонент 1: список => URL / функция / список
  • компонент 2: детали => url / feature / details / 123
  • компонент 3: edit => url / feature / edit / 123
  • компонент 4: add => url / feature / add

Когда я щелкаю функцию из боковой панели, мне по умолчанию предоставляется компонент-список функций.

В каждом компоненте списка функций я использую кнопки навигации для перехода к соответствующим компонентам сведения, изменить и добавить через URL-адрес, например: this.router.navigateByUrl('/feature/details/123').

Одна из моих функций имеет mat-tab-group в «компоненте деталей». Когда я перехожу к этому компоненту (например, /feature/details/123), я также хотел бы иметь возможность щелкнуть какую-либо вкладку и увидеть компонент-список. Но чтобы внести ясность, я хочу, чтобы этот компонент был виден на вкладке, а не в основной розетке. В этом списке должна отображаться таблица с некоторыми данными с id: 123. Кроме того, этот встроенный компонент списка должен иметь разные кнопки, чтобы я мог переходить к его соответствующим деталям, редактировать и добавлять компоненты.

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

Может кто-нибудь объяснить, как мне с этим справиться? Возможно ли это вообще?


angular router-outlet mat-tab angular6 routing
person bluebit    schedule 19.04.2019    source источник
comment
Вы хотите знать, как добавить идентификатор в URL-адрес? stackoverflow.com/a/47382088/6108211   -  person Dmitry Grinko    schedule 19.04.2019
comment
@DmitryGrinko Спасибо, но это я знаю. Я ищу решение, как иметь матовую вкладку, которая является частью дочернего компонента, и перемещаться между различными другими дочерними компонентами на этой вкладке. Проблема в том, что если я попробую, он обновит содержимое основной розетки.   -  person bluebit    schedule 23.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сопоставить компонент DetailsComponent с маршрутом /feature/details и использовать маршрут :id как дочерний по отношению к маршруту подробностей. В компоненте DetailsComponent вы должны использовать вкладки материалов с маршрутизацией.

в модуле маршрутизации

const routes: Routes = [
  {
    path: 'feature',
    children: [
      {
        path: 'list',
        component: ListComponent
      },
      {
        path: 'details',
        component: DetailsComponent,
        children: [
          {
            path: ':id',
            component: TabIdComponent,
            data:
            {
              title: 'Detail',
            }
          },
          {
            path: 'list',
            component: ListComponent,
            data:
            {
              title: 'List',
            }
          },
          ...
          {
            path: '',
            redirectTo: 'list',
            pathMatch: 'full'
          },
        ]
      },
      ...
    ]
  }

];

подробнее.component.html

<nav mat-tab-nav-bar>
   <a mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.link"
            routerLinkActive
            #rla="routerLinkActive"
            [active]="rla.isActive"
          >
            {{ tab.label }}
   </a>
</nav>
<router-outlet></router-outlet>`

Чтобы получить список вкладок из конфигурации маршрутизатора, вы указываете его из ActivatedRoute в файле details.component.ts

public tabs: Tab[];

constructor(activatedRoute: ActivatedRoute) {

    activatedRoute.paramMap.subscribe(value => {
      this.tabs = new List(activatedRoute.snapshot.routeConfig.children)
          .Where(r => r.path !== '')
          .Select(r => new Tab(r.path, r.data.title)).ToArray();
    });
  }


...

export class Tab {
    link: string;
    label: string;

    constructor(link: string, label: string) {
        this.label = label;
        this.link = link;
    }
}

Если вы не хотите, чтобы ListComponent когда-либо загружался в основной розетке (даже при переходе к /feature/list), вы можете перенаправить его на /feature/details/list вместо определения компонента для этого маршрута, используя

{
  path: 'list',
  redirectTo: 'details/list',
  pathMatch: 'full'
}
person Sven    schedule 23.04.2019