Question

我有一个Angular 5应用程序，可以动态加载功能模块并在主路由器插座中显示其内容。下面的代码显示了我的基本配置：

来自根模块（主路由器插座）的

app.component：

<router-outlet></router-outlet>

root的路由配置（模块是从传递的URL动态加载的）：

const routes: Routes = [
    { path: 'module1', loadChildren: ...},
    { path: 'module2', loadChildren: ...}
];

export const AppRoutes = RouterModule.forRoot(routes);

其中一个功能模块的示例路由：

const routes: Routes = [
    { path: 'report/:reportId', component: ReportComponent}
];

export const AppRoutes = RouterModule.forChild(routes);

及其app.component包含另一个路由器插座：

<router-outlet></router-outlet>

这样的配置工作正常 - 如果我去mysite.com/module1，然后加载module1并且angular控制功能模块路由器，所以访问mysite.com/module1/report/2会在功能模块内显示ReportComponent＆＃ 39; s路由器插座。

我现在要做的是将TabsComponent添加到我的主模块，以便能够从多个选项卡组成页面，其中每个选项卡将包含一个特定模块。我想以某种方式使用已经指定的root路由，而不是手动将其重复为TabsComponent的子项，并将功能模块加载到TabsComponent的路由器插座中。

tabs.component：

<tabs-navigation></tabs-navigation>
<router-outlet></router-outlet>

tabs.configuration（在运行时通过http动态加载）：

{
    pageId: "page1",
    tabs: [{
        tabId: "tab1",
        module: "module1",
        params: "report/2"
    }, {
        tabId: "tab2",
        module: "module2"
    }]
}

我的路由配置中的另一行是root：

{ path: 'tabs/:pageId', component: TabsComponent}

从现在开始访问mysite.com/tabs/page1时，我想：

通过http端点读取page1的配置。
生成指向该页面的所有已配置选项卡的链接导航。
单击链接后，在TabsComponent的路由器插座中显示选项卡的内容（默认情况下，应显示第一个选项卡）。它基本上意味着将功能模块加载到路由器插座而不是主插座。

我的两个问题是：

如何正确配置路由我提供的所有功能模块都可以作为独立页面（现在可以使用）加载，也可以作为选项卡页面中的选项卡加载。
如何为选项卡式方案生成链接，以便我可以通过导航或直接从给定的URL转到特定选项卡？我想我需要包含页面和标签ID以及模块详细信息，以使所有部件正常工作，例如mysite.com/page1/tab1/module1/report/2。

Answer 1

@syntax_error这就是我的做法。我对Angular也有类似的要求。我的应用程序有一个页面，显示多个用户，每个用户都有一个对应的详细视图/路线。例如

列出用户A，B，C的用户列表页面
用户A的信息
- 用户A的住所信息
- 用户A的城市住所信息
- 用户A的国家住所信息
用户A的办公室信息

用户A的信息也具有子状态（家庭信息，城市信息，乡间别墅均为用户A信息的子路线）大多数顶级路线就是这种情况。我已经使用ngrx和mat-tab解决了我的问题。外壳组件的对齐方式如下。

<header></header>
<my-tab></my-tab>
<router-outlet></router-outlet>
<footer></footer>

my-tab组件负责侦听可观察的事件，该事件可在更新选项卡列表时触发。只要可观察对象得到响应，选项卡组件就会呈现更新的选项卡。单个标签表示为

{
 id: unique tab id,
 isActive: is tab current active,
 isHomeTab: denotes if a tab is home tab or user tab
 currentViewURL: current route url for this tab
 timestamp: time in ms when this tab was created //used to decide the order in which tabs are created
}

流程如下，

应用程序引导程序和ngrx加载默认选项卡。对于默认标签，当前视图网址为空
一旦创建了新标签，副作用将通过路由到标签中存储的状态来启动标签。对于默认选项卡，其空URL和空URL已映射到归属状态，因此在路由器出口归属路由被激活。
现在，当最终用户从用户列表中选择新用户时，将创建一个新选项卡并将其添加到状态。此路由指向默认的信息路由，此选项卡的isActive也设置为true，而其他选项卡isActive设置为false。添加选项卡以声明状态后，步骤2中提到的副作用将通过读取当前视图URL并导航至该选项卡来激活该选项卡。
创建标签后，可观察标签会更新，从而触发标签组件中的侦听器，然后根据新列表重新呈现标签。
要维护选项卡的路由器状态，收听路由导航完成事件，然后找出当前活动的选项卡并更新其当前视图URL。
只要单击现有标签，请阅读标签网址并导航至该标签。
每当单击选项卡关闭时，请从状态中删除该选项卡。这将触发一个效果，该效果随后将使用timestamp属性找到在此选项卡之前创建的选项卡。找到标签后，它将使用当前视图的url属性导航到标签。

希望这可以帮助您或其他人决定如何继续使用标签实现。

在Angular

1 个答案: