本文介绍了Angular 5的子路由无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,我正在尝试使用子路由,但是它不能按预期工作.

Hello I am trying to use child routing, but it does not work as intended.

我的5号角结构:

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

In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.

应用程序模块(和应用程序组件)包含一个顶部导航栏,可导航到不同的子模块,并且应用程序组件模板看起来像这样

The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this

 <top-navbar></top-navbar>
 <router-outlet></router-outlet>

但这是复杂性.我需要子模块具有类似的布局,并带有第二级导航栏和自己的路由器出口,以加载自己的组件.

But here is the complexity. I need my submodules to have similar layout with a second level nav bar and their own router outlet to load their own components.

 <sub-navbar></sub-navbar>
 <router-outlet name='sub'></router-outlet>

我的app.module.ts

My app.module.ts

RouterModule.forRoot([
  {
    path: 'career', component: CareerComponent,
    children: [
      { path: 'roles', component: rolesComponent, outlet: 'sub' }
    ]
  }
])

我的HTML文件,我在导航按钮上使用以下格式:

My HTML file, I am using the following format on my nav buttons:

[routerLink]="[{ outlets: { sub: ['roles'] } }]"

我也尝试了以下方法(这无济于事,我单击角色"按钮却没有任何反应):

I also have tried the following (this does nothing, I click on Roles button and nothing happens):

[routerLink]="['/roles']"

在顶部菜单中,我从导航上单击职业".现在,我的网址显示为mywebsite.com/career

On top menu I click on Career from the nav.Now my url shows as mywebsite.com/career

现在从这里开始,我的侧边菜单中有一个职业页面,其中一个按钮是角色".这应该更改页面的局部视图.该组件已正确加载,问题在于url格式错误.

now from here I have a career page with my side menu, one of the button is Roles. This should change the partial view of the page.The component is loaded right, the problem is that the url format is wrong.

预期网址:

 mywebsite.com/career/roles

显示方式(错误):

 mywebsite.com/career/(sub:roles)

推荐答案

首先,请确保我们在术语方面处于同一页面上.

First, let's ensure we are on the same page regarding terminology.

子"路由是嵌套路由.像这样:

"Child" routes are nested routes. Something like this:

请注意,应用程序路由的路由器出口为全屏.外壳组件的路由器出口是导航栏下方的区域.编辑组件的路由器出口是选项卡下的区域.

Notice that the app route's router outlet is the full screen. The shell component's router outlet is the area under the nav bar. The edit component's router outlet is the area under the tabs.

子路由是使用 children 属性定义的,就像在上面的问题中所示的路由配置中一样.

Child routes are defined using the children property as you have in your route configuration shown in your question above.

子路由与命名(也称为辅助)路由不同.辅助路由用于并排且没有嵌套关系的路由.当前存在很多错误和辅助路由问题,我暂时不建议使用.

Child routes are different from named (also called auxiliary) routes. Aux routes are for routes that are side by side and not in a nested relationship. There are currently lots of bugs and issues with aux routes and I don't recommend them at this time.

从您的描述中看来,您确实需要 child 路由,而不是 aux/named 路由.因此,您不应使用 name 属性或 outlet 属性.

It sounds like from your description that you really need child routes not aux/named routes. So you should not be using the name attribute nor the outlet property.

除非我误解了您的情况?

Unless I misunderstand your scenario?

我在这里有一个youtube视频,演示了子路线(和其他一些路线选择技术): https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

I have a youtube video that demonstrates child routes (and some other routing techniques) here: https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

您可以在此处找到示例代码:

And you can find sample code here:

https://github.com/DeborahK/MovieHunter-routing

在这里:

https://github.com/DeborahK/Angular-Routing

这篇关于Angular 5的子路由无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 09:16
查看更多