Question

我使用的是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获取正确的组件名称，我还能如何修改这个条件，以便根据组件决定是否resueRoute？

Answer 1

遵循本指南也让我陷入困境一段时间，但这样做似乎解决了我的问题。它只打印＆＃34; t＆＃34;是因为角度缩小了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 =＆＃39; ComponentNameAsText＆＃39; 交换为 future.component = Component

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

1 个答案: