首页 文章

Angular 5的子路由无法正常工作

提问于
浏览 次
0

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

我的角度5结构：

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

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

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

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

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

我的app.module.ts

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

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

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

我也尝试了以下（这没有任何作用，我点击角色按钮，没有任何反应）：

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

在顶部菜单上，我点击导航中的Career . 现在我的网址显示为mywebsite.com/career

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

预期网址：

mywebsite.com/career/roles

如何显示（错误）：

mywebsite.com/career/(sub:roles)
angular typescript

1 回答

  • 1

    首先，让我们确保我们在术语相同的页面上 .

    “Child”路由是嵌套路由 . 像这样的东西：

    enter image description here

    请注意，应用路由的路由器插座是全屏 . shell组件的路由器插座是导航栏下方的区域 . 编辑组件的路由器插座是选项卡下的区域 .

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

    子路由与命名（也称为辅助）路由不同 . 辅助路由用于并排而不是嵌套关系的路由 . 目前有很多关于aux路径的错误和问题，我现在不推荐它们 .

    从您的描述中可以看出，您确实需要子路线而不是辅助/命名路线 . 所以你不应该使用 name 属性，也不应该使用 outlet 属性 .

    除非我误解了你的情景？

    我有一个youtube视频，演示了子路由（以及其他一些路由技术）：https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

    你可以在这里找到示例代码：

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

    和这里：

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

    回复于

相关问题