如何根据路由显示组件组件的一部分

Question

我试图在某些路由中显示我的标题组件的一部分。这是我的标题组件：

<div id="cabecalho" class="p-2">
<div class="row">
<div class="col mt-2">
  <div *ngIf="this.unidadeAtendimento == 8">
    <img src="../../../assets/imagens/logo-stl-removebg-preview.png" alt="logo-stl" class="logo-stl mt-1"/>
  </div>
</div>
<!-- here starts the part that I want to show just in some routes -->
<div class="col text-center mt-2">
  <a [routerLink]="['/lista-contas']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento }">
    <i class="bi bi-receipt"></i>
    <p>
      Contas
    </p>
  </a>
</div>
<div class="col text-center mt-2">
<a [routerLink]="['/cti/home']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
    <i class="bi bi-hospital"></i>
    <p>
      Internação
    </p>
  </a>
</div>
<div class="col text-center mt-2">
  <a [routerLink]="['/tela-upload']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
    <i class="bi bi-upload"></i>
    <p>
      Upload
    </p>
  </a>
</div>
<!-- here it ends -->
<div class="col text-end" *ngIf="this.unidadeAtendimento != null">
  <button class="btn btn-danger mt-3 me-5" (click)="logout()">Sair</button>
</div>

这是我的路由组件：

const routes: Routes = [
{
  path:'cti/home',
  component:HomeComponent,
},    
{
  path:'tela-de-escolha',
  component:TelaDeEscohaComponent,
},
{
  path:'lista-contas',
  component:ListaContaComponent,
},
{
  path:'tela-upload',
  component:TelaUploadComponent
}
];

 @NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
 })
 export class AppRoutingModule {}

我不想只在“tela-de-escolha”路线中显示组件的一部分。有人知道我该怎么做吗？

Answer 1

您可以将 *ngIf 指令与注入的 Router 服务结合使用。 在构造函数中注入 Router 服务：

constructor(readonly router: Router) {}

现在你可以将*ngIf条件添加到你只想在某些路由中显示的组件部分。检查当前 URL 是否不等于路由 'tela-de-escolha'：

<div *ngIf="router.url !== '/tela-de-escolha'">
  ...
</div>

这将确保部分组件只会显示在“tela-de-escolha”以外的路线上。

Answer 2

连同前面的答案（@SparrowVic），您还可以考虑创建一个新组件，其中包含您要根据条件切换的视图，并在满足条件时让标题组件加载它。这将使它更具可读性和更易于维护。

此外，根据您的特定用例，如果很有可能实际上有两种类型的用户 - 一种通常只访问“tela-de-escolha”而不访问其他页面，另一种是访问其他页面并且通常无意登陆“tela-de-escolha” - 如果满足条件，您可能会考虑延迟加载上述（新）视图组件（不是路由，只是组件）。这样你的项目可能会加载得更快（同样，取决于结构和用例）。

如果你使用它，请参阅使用

ngComponentOutlet

并在标题的 ts 中使用

from()

导入。