Question

如果我们在组件中使用ToLower（任何组件），然后将<router-outlet>放到该组件中的另一个组件，那么该链接始终会在routerLink中呈现链接到的组件当前活跃的组件？

换句话说，组件<router-outlet>属性是否始终与组件中的routerLink配对？

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

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

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

1 个答案: