angular-router - 在两个路由器插座之间导航

Question

我想在我的 Angular 应用程序中的两个插座之间导航。

首先，我的第一个观点app.html：：

<div class="app">
  <router-outlet></router-outlet>

  <router-outlet name="application"></router-outlet>
</div>

然后，我的application.html模板，它是一些孩子的包装状态：

<div>
   <some-navbar></some-navbar>
   <div class="application__router-wrapper">
     <router-outlet></router-outlet>
   </div>
</div>

我的路线定义：

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: { state: 'LOGIN' }
  },
  {
    path: 'register',
    component: LoginComponent,
    data: { state: 'REGISTER' }
  }
  },
  {
    path: 'application',
    component: ApplicationComponent,
    outlet: 'application',
    children: [
      {
        path: 'notes',
        component: NotesComponent
      },
      {
        path: 'reminders',
        component: RemindersComponent
      }
    ]
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
];

我的登录功能进行重定向：

login() {
  this.router.navigate(['/application/notes']);
}

那么我的问题是什么：我可以轻松地在登录和注册视图之间导航（我对这两个视图使用一个组件），但我无法访问应用程序/注释。我收到错误消息：

Error: Cannot match any routes. URL Segment: 'application/notes'

那么我做错了什么？我的代码中的错误在哪里？

Answer 1

你应该使用

this.router.navigate(['', { outlets: { application: ['application', 'notes'] } }]);

// or (I'm not sure which one)

this.router.navigate(['', { outlets: { application: ['notes'] } }]);