Angular 仪表板应用程序的 7 个多个路由器插座

Question

我有一个用于显示主页、仪表板、申请表的主要出口。

仪表板是一个画廊，用于显示不同类型的图块，例如图表，table。

我希望仪表板的每个图块中都有一个出口来显示图表或 table。

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

主要出口 -> 主页、仪表板、请求。

仪表板 -> 用另一个出口平铺组件以显示 chart/list。

主页组件

  <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

如果我的理解是正确的，您不需要嵌套 outlets/child 路线，因为您不打算以某种方式导航到您 charts/tables。当你计划改变依赖内容时常用路由url。例如，您的仪表板上有超过 1 个页面，并且想让用户在它们之间切换。那么你应该有 /dashboard/1、/dashboard/2 等路线。但据我了解，你想显示动态定义 tiles/widgets 的仪表板，对吧？因此，您所需要的只是一些定义 要显示的内容 的数据结构和一些用于显示这些内容的组件集。您将有 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>

Angular 仪表板应用程序的 7 个多个路由器插座

Angular 7 multiple router outlets for a dashboard app

javascript

angular

angular2-routing

angular-routing

angular-routerlink