Angular 路由器插座的正确用例

Question

我应该什么时候使用路由器插座？显然我的 app.component 中有 1 个，但还有哪些其他用例？

在我的用户组件 (user/:id) 中放置 1 以显示 post 列表 (user/:id/posts) 似乎是个好主意，但似乎无法注入 user.posts 数据进入出口，在我看来这是个坏主意。

我很想听听对此的一些想法。

编辑：这个 post 具体是关于路由器出口如何无法直接接收数据，因此在我看来有点违背了它自己的目的。

Answer 1

<router-outlet></router-outlet> 本质上是从 @angular/router 公开的指令。在我们的 Routes 配置中，我们指定了 path 和到达该路径时预期加载的 component。

但是Angular不知道应该在哪里注入那个组件模板。这是我们通过指定 <router-outlet></router-outlet>.

告诉 Angular 的东西

本质上，它充当应该通过路由加载的组件的容器区域。

你把它放在哪里完全取决于你有什么样的路由配置。

在子路由的情况下，如果您想指定将再次基于路由加载的组件，那么您也可以在该父路由组件中指定一个<router-outlet></router-outlet>。

看看这个 Routes 配置，例如：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'blog', component: BlogComponent, canActivate: [ ActivateGuard ] },
  { path: 'messages', component: MessageListComponent, canDeactivate: [ DeactivateGuard ] },
  { path: 'parent', component: ParentComponent },
  { path: 'bd', component: BuiltInDirectivesComponent },
  { path: 'cd', component: CustomDirectivesComponent },
  { path: 'new-user', component: NewUserComponent },
  { path: 'new-user-reactive', component: NewUserReactiveComponent },
  { 
    path: 'users', 
    component: UsersComponent,
    children: [
      { path: ':userId', component: UserDetailsComponent },
      { path: '', component: PlaceholderComponent }
    ]
  },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

现在说如果我想在左侧显示 UsersComponent 的用户列表。在右侧，我需要显示列表中选定用户的详细信息。

在这种情况下，AppComponent 模板中将有一个 <router-outlet></router-outlet>。然后 UsersComponent 模板中会有另一个 <router-outlet></router-outlet>。希望现在清楚了。

Angular 路由器插座的正确用例

Angular proper use case for router-outlets

angular

router-outlet