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

Question

如果我们使用<router-outlet>组件(任何组件)然后将a放到routerLink该组件中的另一个组件,链接是否始终呈现链接到<router-outlet>当前活动组件的组件？

换句话说,组件routerLink属性是否始终与<router-outlet>组件内部配对？

Answer 1

在<router-outlet>没有连接到组件.它链接到它所驻留的组件的子路由.

routerLink只是导航Applications分配的路由

例如,假设您有这些路线

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时,它将加载应用程序组件,并在该组件的路由器插座中加载主组件.它根据路由树中的站点位置在路由器插座中加载组件.

注意:这不是生产代码,不应该这样使用.