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

Question

如果我们在组件(任何组件)中使用 <router-outlet> ，然后将 routerLink 放在该组件内的另一个组件上，链接是否总是呈现链接到当前事件组件的 <router-outlet> 中的组件？
换句话说，组件 routerLink 属性是否总是与组件内的 <router-outlet> 配对？

Answer 1

<router-outlet> 未链接到组件。它链接到它所在组件的子路由。
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 时，它​​将加载应用程序组件，并在该组件的路由器 socket 中加载 home 组件。它根据它在路由树中的位置加载路由器导出中的组件。
注意:这不是生产代码，不应如此使用。