时间戳

首页 > 解决方案 > Angular-查找子组件名称

angular - Angular-查找子组件名称

问题描述

我有一个带有面包屑组件和路由器插座的父组件：

<div class="LG_popage-wrap">
  <div class="LG_global-popage-crumbs" style="text-align: center">
    <app-breadcrumb [breadcrumbsData]="breadcrumb" ></app-breadcrumb>
  </div>
  <router-outlet></router-outlet>
</div>

面包屑属性只是组件名称上的一个数组：

  breadcrumb: Array<BreadcrumbModel> = [
    {
      componentName: 'StepSetupComponent',
      label: 'setup'
    },
    {
      componentName: 'StepFieldsComponent',
      label: 'fields'
    },
  ]

我需要在我的子路由（使用路由器 Outlet 注入）中，将当前组件名称的名称与我的数组进行比较。我已经编写了代码，但它只在本地而不是在生产中工作

export class BreadcrumbComponent implements OnInit {

  @Input() breadcrumbsData: Array<BreadcrumbModel> = [];
  breadcrumbsIndex: number;
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {
    router.events.subscribe((val) => {
      // Route changing
      window.scrollTo(0, 0);

      this.breadcrumbsIndex = this.breadcrumbsData.findIndex(x => x.componentName === this.route.firstChild.component['name']);
    });
  }

  ngOnInit() {
    this.breadcrumbsIndex = this.breadcrumbsData.findIndex(x => x.componentName === this.route.firstChild.component['name']);
  }

}

问题是 this.route.firstChild.component['name']

在本地，他给了我组件的名称。但在产品中，他给了我一个名字“N”

如何找到我当前组件的名称？

谢谢你的帮助。

标签： angularroutescomponents

解决方案

在构建您的项目时，角度会使您的代码变得丑陋，以获得更小的包大小。因此名称将被更改。

这也不是处理面包屑的正确方法。尝试将您的标签添加到路线数据并在那里获取

推荐阅读