Javascript 角度7多个路由器插座，用于仪表板应用程序

我有一个主插座，用于显示主页、仪表板和请求表单

Dashboard是一个图库，用于显示不同类型的图块，如图表、表格

我希望在仪表板的每个平铺中都有一个插座，以显示图表或表格

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

主插座->主页、仪表板、请求

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

HomeComponent

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

仪表板组件：

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

--图表/表格的出口--//磁贴1
--图表/表格的出口--//磁贴2，依此类推。

如果我理解正确，您不需要嵌套的门店/子路线，因为您不打算以某种方式导航到图表/表格。根据url计划更改内容时常用的路由。例如，您的仪表板上有超过1个页面，并且希望让用户在这些页面之间切换。 然后你应该有类似于

/dashboard/1

，

/dashboard/2

等的路线。但据我所知，你想用动态定义的tile/widget来显示仪表板，对吗？ 因此，您所需要的只是一些定义要显示的内容的数据结构，以及一些用于显示这些内容的组件集。您将有一个主要组件—

仪表板

，其中路线为

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

未知小部件类型：{{widget.type | json}

您是否尝试导航到“仪表板/磁贴/图表”？或“dashboard”？我可以从家里导航到dashboard。仪表板上几乎没有瓷砖。我希望在每个磁贴中都有一个辅助插座，根据其输入显示图表或表格。如果我知道您需要仪表板组件中的路由器插座子级。例如，在模块中拆分。您可以在AppModule中使用“AppModule”、“DashboardModule”等，您现在拥有的是主插座。在仪表板模块中，您可以有另一个路由器出口，因此在仪表板中，您可以定义新的路由：“/tile/chart”、“tile/…”以及您将链接的那些组件将在仪表板路由器出口中呈现在仪表板模块中，如果每个tile组件都有该出口来使用/tile/chart或/tile/table，因为dashboard@KalamaricoI的所有瓷砖中都重复了该插座，所以每个瓷砖插座都不会响应导航请求。只有一个路由器出口比您的多（您在appModule中只有一个权限）。在仪表板组件模板内，设置一个新的路由器出口，在routes define中，您可以在这些瓷砖路径中绘制它们，它们将在该路由器出口中呈现。到目前为止，我一直在执行相同的操作，以便在小部件之间切换。我开始使用路由选项的原因是，我有一个新的要求，即每个磁贴上都有一个设置按钮。单击该设置按钮，将显示一个请求表单。在提交请求时，我需要根据响应在小部件之间切换。现在，我将尝试将该响应直接链接到平铺，而不考虑路由问题。这里没有看到问题，您知道小部件用户想要编辑的内容-调整设置后，更新coresponding

widgetLines[I]。组[j]。小部件[k]

和视图也将更新。

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