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

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

0 голосов
/ 19 апреля 2019

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

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

Когда я щелкаю элемент в sidenav, мне по умолчанию предоставляется список компонентов компонента.

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

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

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

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

1 Ответ

0 голосов
/ 23 апреля 2019

Вы можете сопоставить 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'
          },
        ]
      },
      ...
    ]
  }

];

в details.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 загружался в первичную розетку (даже при переходе на *)1015 *) вы можете перенаправить его на /feature/details/list вместо определения компонента для этого маршрута, используя 

{
  path: 'list',
  redirectTo: 'details/list',
  pathMatch: 'full'
}
...