当前状态在Angular中的延迟加载路由器中的根组件方面模块子项

Question

我的路由器配置中有这个代码

path: 'printing-documents',
    component: PrintingDocumentsContentComponent,
    children: [
      {
        path: '',
        component: PrintingDocumentsHomeComponent,
      },
      {
        path: 'new',
        component: PrintingDocumentsNewComponent,
      },
      {
        path: ':id',
        component: PrintingDocumentsEditComponent,
      },
    ],

在我的PrintingDocumentsContentComponent我有这个代码HTML

<nb-card>
  <nb-card-header>
    <a class="btn btn-light lamb-button" (click)="onBack()">
      <span class="fa fa-undo lamb-icon" > </span>
    </a>
    {{ titleContainer }}
  </nb-card-header>
  <nb-card-body>
    <router-outlet></router-outlet>
  </nb-card-body>
</nb-card>

我需要的是，当路线是http://localhost:4200/#/lamb/accounting/configuration/printing-documents按钮**后（）**这个隐藏。但是当http://localhost:4200/#/lamb/accounting/configuration/printing-documents/new或http://localhost:4200/#/lamb/accounting/configuration/printing-documents/15按钮显示时。

我知道我必须在ngOnInit ()的PrintingDocumentsContentComponent方法中使用dependenciesActivatedRoute或Router做一些事情，但我不知道是什么。

我会很感激

Answer 1

您可以通过检查当前路线的最后一段来完成此操作。您需要导入ActivatedRoute，UrlSegment并在您的组件中使用。

在您的PrintingDocumentsContentComponent.component.ts中添加以下代码

import { ActivatedRoute, UrlSegment } from '@angular/router';

let flag:boolean=false;
constructor(private route: ActivatedRoute)

ngOnInit() {

    const url: UrlSegment[] = this.route.snapshot.url;

    if(url[0].path=='printing-documents'){
      this.flag = true
    }
     else {
      this.flag = false
     }

在PrintingDocumentsContentComponent.component.html中

<a class="btn btn-light lamb-button" *ngIf="!flag" (click)="onBack()">
    <span class="fa fa-undo lamb-icon" ></span>
  </a>