当前状态在 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 按钮 **back()** 这个隐藏的。但是当 http://localhost:4200/#/lamb/accounting/configuration/printing-documents/new 或 http://localhost:4200/#/lamb/accounting/configuration/printing-documents/15 按钮显示时。

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

我将不胜感激

Answer 1

您可以通过检查当前的最后一段来做到这一点 route.You 需要导入 ActivatedRoute、UrlSegment 并在您的组件中使用。

In your PrintingDocumentsContentComponent.component.ts add below code

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
     }

In PrintingDocumentsContentComponent.component.html

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

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

Current status is in root component respect module child in lazy loading router in Angular

router

state

angular