在应用程序组件以外的组件中使用 <router-outlet>？

Question

如果我们使用当前活动组件的<router-outlet> in a component (Any component) and then put a routerLink to another component within that component, does the link always render the component linked to in the <router-outlet>？

也就是说组件routerLink attributes always paired with the <router-outlet>是在一个组件中吗？

Answer 1

<router-outlet> 未链接到组件。它链接到它所在组件的子路由。

A routerLink 仅导航应用程序分配的路由

例如假设您有这些路线

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'account', component: AccountComponent, children: [
    { path: 'details', component: AccountDetails
  ]
];

你的 AppComponent 看起来像这样我们会说

@Component({
  template: `
<div>
  <a routerLink='/home'>Home</a>
  <a routerLink='/account'>Account</a>
  <a routerLink-'/account/details>Account Details</a>
</div>
<div>
  <router-outlet></router-outlet>
</div>
`
})

假设您的 AccountComponent 是这样的

@Component({
  template: `
    <div>
      Account Name {{ name }}
    </div>
    <div>
      <a routerLink='/home'>Home</a>
      <a routerLink='/account'>Account</a>
      <a routerLink-'/account/details>Account Details</a>
    </div>
    <router-outlet></router-outlet>
    `
  })

当您单击“帐户详细信息”时，它将在帐户组件的路由器出口中加载具有详细信息的帐户组件。

当您点击 home 时，它会加载 app 组件，home 组件加载在该组件的路由器出口中。它根据它在路由树中的位置加载路由器出口中的组件。

注意：这不是生产代码，不应这样使用。

在应用程序组件以外的组件中使用 <router-outlet>？

Using the <router-outlet> in components other than the application component?

angular-routing

angular

angular-router