首页 文章

Angular 2路线儿童出口

提问于
浏览 次
4

目前正在尝试了解Angular 2路由，并且我遇到了一个我无法解决的问题，感觉它是某种语法或配置，我只是缺少 .

我希望在一个页面上有两个路由器插座，并且能够在页面上显示两个单独的部分，用户可以单独导航 .

我试着从这里开始代码 - http://onehungrymind.com/named-router-outlets-in-angular-2/

但是，当我这样做时，我收到一个错误，说它无法找到子路由所在的路由 .

这是代码：

路线

{
    path: 'full',
    component: FullComponent,
    children: [
        {
            path: 'list',
            component: ListComponent,
            outlet: 'list'
        }
    ]
}

在完整组件中：

<div divOne>
    <router-outlet name="list"></router-outlet>
</div>
<div divTwo>
    <router-outlet name="detail"></router-outlet>
</div>

我这样导航：

let navigationExtras: any = {
        queryParams: { reference: 21 },
        outlets: {'list': ['list']}
    };

    this.router.navigate( ['full'], navigationExtras);

这给我以下错误信息：

core.umd.js：5995 EXCEPTION：未捕获（在承诺中）：错误：无法匹配任何路线：'full'

如果我从子路径中取出插座，我不会收到此错误消息 .

任何人都可以指出我哪里错了吗？

angular routes angular-routing

2 回答

  • 5

    该组件只需要一个未命名的路由器插座，并可以有其他命名插座

    <router-outlet></router-outlet>
<router-outlet name="full"></router-outlet>

this.router.navigate( ['full'], navigationExtras);

    导航（[{outlets：{route3：'productPage'}}]）;

    navigate() {
    let navigationExtras: any = {
      queryParams: { reference: 21 },
      outlets: {full: 'full']}
    };
    this.router.navigate([navigationExtras]);
  }

    Plunker example

    回复于
  • 1

    router.navigate 方法的第一个参数应该是 ['/full'] 而不是 ['full'] .

    this.router.navigate(['/full'], navigationExtras);

    回复于

相关问题