Typescript 表達式未在 Angular 8 生產版本中評估路由器

Question

我正在嘗試在我的 angular 應用程序的路由器模塊內執行 TS 表達式。 我想評估以下表達式， const check: any = window.innerWidth > 600? RouteOneComponent: RouteTwoComponent; const check: any = window.innerWidth > 600? RouteOneComponent: RouteTwoComponent;

但它總是路由到RouteOneComponent ，即使window.innerWidth值小於 600

我創建了簡單的應用程序來重現這種行為，以下是我的路由器模塊代碼

應用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RouteOneComponent } from "./route-one/route-one.component";
import { RouteTwoComponent } from "./route-two/route-two.component";

const check: any = window.innerWidth > 600 ? RouteOneComponent : RouteTwoComponent;

const routes: Routes = [
  { path: 'web', component: RouteOneComponent },
  { path: 'mob', component: RouteTwoComponent },
  //tried this - didn't work after build
  { path: 'check', component: window.innerWidth > 600 ? RouteOneComponent : RouteTwoComponent }
  //also tried this - didn't work after build
  { path: 'check', component: check }
  //also tried this - didn't work after build
  { path: 'check', component: (() => {return window.innerWidth > 600 ? RouteOneComponent : RouteTwoComponent})() }
  //also tried removing the above anonymous function to a named function
  //gave error during template compile, function calls not supported in decorators
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

當我在本地編譯和運行時，它可以工作，當我構建（ ng build --prod=true ）並運行應用程序然后 go 到localhost:4200/check時，表達式回退為 true 並且總是打開RouteOneComponent在移動。

是否有任何導致這種行為的 TS 配置（ ts-config.json ）？ 調試或修復問題的方法是什么，這只發生在構建之后而不是在本地。

Answer 1

一個簡單的選項是您可以首先重定向到一個通用組件，然后在附加的組件模板中使用 ng-if 來啟用適當的組件視圖。

像這樣的東西

@Component({
    template: `
        <router-one-component *ngIf="isWindowsSizeMorethan600"></router-one-component>
        <router-two-component *ngIf="!isWindowsSizeMorethan600"></router-two-component>
    `

isWindowsSizeMorethan600: boolean;    
ngOnInit() {        
        this.isWindowsSizeMorethan600 = window.innerWidth > 600;
}

其他選項是使用動態組件加載選項。 在這種情況下，您必須使用ViewContainerRef來獲取對容器的引用並使用createComponent方法動態加載組件。

請參閱下面的示例

template: `
    <ng-template #vc></ng-template>
  `

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

ngAfterViewInit() {
    loadComponent(vc);
}

async loadComponent(vcr: ViewContainerRef) {
    const { RouteOneComponent } = await import('./somepath/route-one.component');
    const { RouteTwoComponent } = await import('./somepath/route-two.component');

    vcr.clear();
    let component : any = window.innerWidth > 600 ? RouteOneComponent : RouteTwoComponent ;       
    return vcr.createComponent(
      this.cfr.resolveComponentFactory(component))    
}}

您可以在文檔https://angular.io/guide/dynamic-component-loader中找到完整的參考資料