相关疑难解决方法(0)

Angular 2 - 子模块路由和嵌套<router-outlet>

我正在寻找一个Angular 2的解决方案,用于下面解释的场景:

在此输入图像描述

在这种情况下,top-nav包含加载子模块的链接,sub-nav有链接来更新子模块的内容.

网址应映射为:

  • / home =>在主组件路由器插座中加载主页
  • / submodule =>加载主组件路由器插座中的子模块,默认情况下应显示子模块的主页和子导航栏
  • / submodule/feature =>加载子模块路由器插座内的功能

应用程序模块(和应用程序组件)包含一个导航到不同子模块的顶部导航栏,应用程序组件模板可能如下所示

<top-navbar></top-navbar>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

但这是复杂性.我需要我的子模块与第二级导航栏和他们自己的路由器插座具有相似的布局,以加载他们自己的组件.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>
Run Code Online (Sandbox Code Playgroud)

我尝试了所有选项并在任何地方搜索但是找不到具有路由器插座的子模块中的默认模板(如app组件)的解决方案,并且还在内部路由器插座中加载子模块的内容而不会丢失子导航.

我会很感激任何意见或想法

routing angular

67
推荐指数
2
解决办法
5万
查看次数

多个命名路由器出口角度2

我希望通过子路径显示不同的视图.例如,我希望我的模板能够容纳多个路由器插座

Version: @angular/router": "3.0.0-alpha.7"

<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
Run Code Online (Sandbox Code Playgroud)

在我的路由器中,我想指定路由器的名称.

正如我在一个问题中看到的,解决方法是指定AuxRoute,但此版本中不存在AuxRoute.

{path: '/',        component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})
Run Code Online (Sandbox Code Playgroud)

虽然在角度2官方网站上我发现它可能有多个路由器,但我找不到任何资源.

https://angular.io/docs/ts/latest/guide/router.html

A template may hold exactly one unnamed <router-outlet>. The router supports multiple named outlets, a feature we'll cover in future.

angular-routing angular

16
推荐指数
1
解决办法
3万
查看次数

标签 统计

angular ×2

angular-routing ×1

routing ×1