Angular 7 множественных выходов маршрутизатора для приложения приборной панели

Question

У меня есть основной выход для отображения дома, приборной панели, формы запроса.

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

Я хочу, чтобы в каждой ячейке панели инструментов отображался выход для отображения диаграммы или таблицы.

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

Первичная розетка -> Главная, Панель инструментов, Запрос.

Панель инструментов -> Компоненты плитки с другой розеткой для отображения диаграммы/list.

HomeComponent

  <router-outlet></router-outlet>  //outlet for dashboard, request

Маршруты :

  {
    path: 'dashboard',
    component: DashboardComponent  //main outlet
  }, 
  {
    path: 'home',
    component: HomeComponent       // main outlet 
  }

Компонент панели инструментов:

   <Tile> --outlet for chart/table -- </Tile> //Tile 1
   <Tile> --outlet for chart/Table -- </Tile> //Tile 2 and so on.

Answer 1

Если я вас правильно понял, вам не нужны вложенные торговые точки / дочерние маршруты, потому что вы не планируете Перемещать к вашим диаграммам / таблицам. Маршрутизация используется совместно, когда вы планируете изменять контент в зависимости от URL. Например, у вас есть более 1 страницы на вашей панели и вы хотите, чтобы пользователь переключался между ними. Тогда у вас должны быть маршруты типа /dashboard/1, /dashboard/2 и т. Д. Но, насколько я понял, вы хотите показать панель мониторинга с динамически определенными плитками / виджетами, верно? Таким образом, все, что вам нужно, это некоторая структура данных, которая определяет , что показать, и некоторый набор компонентов для отображения этих вещей. У вас будет 1 основной компонент - dashboard с маршрутом /dashboard и некоторые компоненты, каждый из которых отображает 1 тип плиток. Примерно так:

<div *ngFor="let line of widgetLines; let i = index">
    <div *ngFor="let group of line.groups; let j = index">
        <div *ngFor="let widget of group.widgets; let k = index">
            <ng-container [ngSwitch]="widget.type">
                <db-widget-one *ngSwitchCase="1" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-one>
                <db-widget-two *ngSwitchCase="2" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-two>
                <db-widget-three *ngSwitchCase="3" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-three>
                <div *ngSwitchDefault>Unknown widget type: {{widget.type | json}}</div>
            </ng-container>
        </div>
    </div>
</div>