gpt4 book ai didi

angular - 在 Angular 的嵌套路由器导出中动态加载模块

转载 作者:行者123 更新时间:2023-12-03 17:35:20 26 4
gpt4 key购买 nike

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

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 包含另一个路由器 socket :
<router-outlet></router-outlet>

这样的配置工作正常 - 如果我去 mysite.com/module1,然后加载 module1 并且 angular 将控制权交给功能模块路由器,因此访问 mysite.com/module1/report/2 会在功能模块的路由器 socket 内显示 ReportComponent。

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

选项卡组件:
<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"
}]
}

在我的根路由配置中添加了一行:
{ path: 'tabs/:pageId', component: TabsComponent}

从现在开始访问 mysite.com/tabs/page1 时,我想:
  • 通过 http 端点读取 page1 的配置。
  • 生成指向该页面的所有已配置选项卡的链接作为选项卡
    导航。
  • 单击链接后,在 TabsComponent 的路由器 socket 内显示选项卡的内容(默认情况下应显示第一个选项卡)。这基本上意味着将功能模块加载到该路由器 socket 而不是主 socket 。

  • 我的两个问题是:
  • 如何正确配置路由提供我希望将所有功能模块加载为独立页面(因为它们现在可以工作)或作为选项卡式页面中的选项卡。
  • 如何为选项卡式场景生成链接,以便我可以通过导航或直接从给定的 url 转到特定选项卡?我想我需要同时包含页面和选项卡 ID 以及模块详细信息,以使所有部分都能正常工作,例如mysite.com/page1/tab1/module1/report/2。
  • 最佳答案

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

  • 用户列表页列出用户 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 组件负责监听一个 observable,它在标签列表更新时触发。每当 observable 获得响应时,选项卡组件都会呈现更新的选项卡。
    单个选项卡表示为
    {
    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 加载默认选项卡。对于默认选项卡,当前 View url 为空白
  • 创建新选项卡后,副作用将通过路由到选项卡中存储的状态来启动选项卡。对于默认选项卡,其空 URL 已映射到主状态,因此在路由器导出中主路由被激活。
  • 现在,当最终用户从用户列表中选择一个新用户时,会创建一个新选项卡并将其添加到状态中。该路由指向信息的默认路由,此选项卡的 isActive 设置为 true,而其他选项卡的 isActive 设置为 false。添加选项卡以声明步骤 2 中提到的副作用后,通过读取当前 View url 并导航到它来激活选项卡。
  • 创建选项卡时,可观察的选项卡会更新,这会触发选项卡组件中的监听器,然后根据新列表重新呈现选项卡。
  • 要维护选项卡的路由器状态,请监听路由导航完成事件,然后找出当前事件选项卡并更新其当前 View url。
  • 每当单击现有选项卡时,请阅读选项卡 url 并导航到该选项卡。
  • 每当单击选项卡关闭时,从状态中删除选项卡。这将触发一个效果,然后使用时间戳属性找到在此选项卡之前创建的选项卡。一旦找到选项卡,它将使用当前 View url 属性导航到选项卡。

  • 希望这可以帮助您或其他人决定如何继续执行选项卡。

    关于angular - 在 Angular 的嵌套路由器导出中动态加载模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48761602/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com