在 shouldReuseRoute 实现中将 webpack 用于生产模式时，CustomReuseStrategy 未打印正确的组件名称答案

【问题标题】：CustomReuseStrategy not printing correct component names when using webpack for production mode in shouldReuseRoute implementation在 shouldReuseRoute 实现中将 webpack 用于生产模式时，CustomReuseStrategy 未打印正确的组件名称
【发布时间】：2017-11-24 02:26:48
【问题描述】：

我正在使用 CustomReuseStrategy 并且指的是 https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5

为了实现 shouldReuseRoute，我使用的是概述的概念：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    let name = future.component && (<any>future.component).name;
    return super.shouldReuseRoute(future, curr) && name !== 'DetailSameComponent';
  }

这在开发环境中运行良好，但在生产环境中，组件名称无法正确打印。当我说生产环境时，我的意思是当我使用 webpack 并构建客户端并将构建复制到服务器并运行时。在这种情况下，所有组件名称都打印为字母“t”。

为什么它打印为't'？它是在做一些 webpack 压缩吗？使用 webpack 时如何获取正确的组件名称？如果我无法使用 webpack 获取正确的组件名称，我还能如何修改这个条件，以便我可以根据组件决定是否重新路由？

【问题讨论】：

标签： angular angular-ui-router angular2-router

【解决方案1】：

遵循本指南也让我陷入了一段时间，但这样做似乎可以解决我的问题。它只打印“t”的原因是因为 angular 缩小了 javascript，以便在通过网络发送它时大大减少包的大小。唯一的问题是这似乎也改变了类名，所以依赖于类名作为文本的东西将不再起作用。解决办法是这样的。

而不是使用

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    let name = future.component && (<any>future.component).name;
    return super.shouldReuseRoute(future, curr) && name !== 'DetailSameComponent';
}

它使用组件名称作为文本，而不是使用：

import DetailSameComponent from {...}

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return super.shouldReuseRoute(future, curr) && future.component !== DetailSameComponent;
}

它使用对组件本身的引用。

TLDR： 将 name = 'ComponentNameAsText' 交换为 future.component = Component

【讨论】：