Angular-查找子组件名称答案

【问题标题】：Angular- find Children component nameAngular-查找子组件名称
【发布时间】：2019-05-01 09:33:30
【问题描述】：

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

<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']

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

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

感谢您的帮助。

【问题讨论】：

标签： angular routes components

【解决方案1】：

在构建您的项目时，角度会使您的代码变得丑陋，以适应更小的包大小。因为名字会改。

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

【讨论】：