<router-outlet> 中的 (activate) 事件在我运行 ng build --prod 时不起作用答案

【问题标题】：the (activate) event in <router-outlet> does not work when I run ng build --prod<router-outlet> 中的 (activate) 事件在我运行 ng build --prod 时不起作用
【发布时间】：2019-06-27 05:07:53
【问题描述】：

通常对我来说一切正常，当我运行 ng build 时，我的代码继续正常运行，并且事件被触发 (activate)。但是在执行ng build --prod 时，此事件不会运行。为什么这会发生在我身上，我该如何纠正？

谢谢

这段代码是我的 app.ts 和 .html

<menu class="m-0 p-0" *ngIf="hide"></menu>
<router-outlet class="m-0 p-0" (activate)='onActivate($event)' ></router-outlet>
<footer_component  *ngIf="hide"></footer_component>


onActivate(component:any){
 this.activatedComponent = component.constructor.name;

之前用ng build编译可以，运行ng build之后也可以，但是用ng build --prod不行，好像没有进入函数。

 console.log(activatedComponent);

 if(this.activatedComponent != 'LoginComponent' && this.activatedComponent != 'RestorePasswordComponent'  && this.activatedComponent != 'NotFoundComponent'){
  this.hide = true;
 } else 
 {
  this.hide = false;
 }

}

【问题讨论】：

检查这个：stackoverflow.com/questions/46561116/…
所以即使console.log(activatedComponent); 也不会发生？
你可以订阅 Angular 的路由器 events 可观察流并使用 URL 来切换 hide 标志。

标签： angular

【解决方案1】：

这很可能是由于生产构建中的缩小过程而发生的。

在您提供的代码中，它正在检查组件的名称，例如this.activatedComponent != 'LoginComponent'。在生产构建期间，由于缩小，名称可能会被缩小，因此代码不会进入if 条件，因为它可能会找到缩小的名称。在部署之前的某个时间点可能会缩小此类不应该依赖的内容。

在这种情况下，一种快速的方法是在 Component 中公开一些公共属性，例如 COMPONENT_NAME，并将组件名称分配给该属性，然后在您的代码中访问该属性，例如：

onActivate(component:any){
 this.activatedComponent = component.COMPONENT_NAME;

【讨论】：