我有一个用于显示主页、仪表板和申请表的主要导出。
仪表板是一个画廊,用于显示不同类型的图 block ,如图表、表格。
我希望仪表板的每个图 block 中都有一个导出来显示图表或表格。
由于有多个 tile 实例并且如果每个 tile 中的导出相同,恐怕每个 tile 都会响应对/tile/chart 或/tile/table 的导航请求。 我应该能够区分每个瓷砖 socket 。
Primary outlet -> Home, Dashboard, Request.
仪表板 -> 使用另一个 socket 平铺组件以显示图表/列表。
主页组件
<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.
最佳答案
如果我对您的理解是正确的,您不需要嵌套的导出/子路线,因为您不打算以某种方式导航到您的图表/表格。当您计划根据 url 更改内容时,通常使用路由。例如,您的仪表板上有超过 1 个页面,并且想让用户在它们之间切换。
那么你应该有像 /dashboard/1
, /dashboard/2
等路线。但据我所知,你想显示带有动态定义的图 block /小部件的仪表板,对吧?
因此,您所需要的只是一些定义要显示的内容 的数据结构和一组用于显示这些内容的组件。您将拥有 1 个主要组件 - dashboard
和路由 /dashboard
以及一些组件,每个组件显示 1 种类型的图 block 。像这样:
<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>
关于javascript - 用于仪表板应用程序的 Angular 7 多个路由器 socket ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55482852/