Angular 7多个路由器插座，用于仪表板应用

Question

我有一个显示家庭，仪表板，请求表格的主要插座。

仪表板是用于显示不同类型的图块（如图表，表格）的图库。

我想在仪表板的每个瓷砖中显示一个插座，以显示图表或表格。

由于存在多个图块实例，并且如果每个图块中具有相同的插座，恐怕每个图块都会响应对/ tile / chart或/ tile / table的导航请求。我应该能够区分每个瓷砖插座。

主要插座 - >主页，仪表板，请求。

仪表板 - >使用另一个插座平铺组件以显示图表/列表。

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

如果我理解你的权利，你不需要嵌套的出口/儿童路线，因为你不打算以某种方式导航到你的图表/表格。当您计划根据网址更改内容时，常用路由。例如，您的仪表板上有超过1个页面，并希望让用户在它们之间切换。然后你应该有像/dashboard/1，/dashboard/2等的路线。但据我所知，你想用动态定义的瓷砖/小部件显示仪表板，对吧？因此，您只需要一些数据结构来定义要显示的内容以及一些用于显示内容的组件。你将有一个主要组件 - dashboard与路线/dashboard和一些组件，每个显示一种类型的瓷砖。像这样的东西：

<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>