CustomReuseStrategyは正しいコンポーネント名を印刷しない

Question

私は、私が説明したような概念使用していますCustomReuseStrategyを使用していますし、shouldReuseRouteを実装するために

https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5を言及していました：

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

このガイドの後にも私はしばらくの間立ち往生していますが、これを実行すると問題が解決したようです。それが "t"だけを出力するのは、角度を使って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： スワップ名= 'ComponentNameAsText'にfuture.component =コンポーネント