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中找到完整的参考资料