Angular2：在同一条路径上有条件/另外定义两条Async路由

我可以使用一些帮助来使用RouterConfig中的AsyncRoute。我有两个组件，我需要加载并具有相同的路径。Angular2：在同一条路径上有条件/另外定义两条Async路由

我必须做一些if else语句，我可以控制哪些组件应该加载。

代码：

@RouteConfig([ 
{ path: '/', name: 'Bookings', component: BookingsComponent }, 
{ path: '/bookings', name: 'Bookings', component: BookingsComponent, useAsDefault: true }, 
new AsyncRoute({ 
    path: '/mian/:id/...', 
    loader:() => this.getMainComponent(), 
    name: 'Main' 
}), 
{ path: '/main/:id/...', name: 'Main', component: MainComponent }, 
{ path: '/main/:id/passenger', name: 'Passenger', component: PassengerComponent }, 
{ path: '/main/:id/date', name: 'Date', component: DateComponent }, 
{ path: '/main/:id/vehicle', name: 'Vehicle', component: VehicleComponent }, 
{ path: '/main/:id/confirmation', name: 'Confirmation', component: ConfirmationComponent }, 
{ path: '/main', redirectTo: ["Bookings"] }, 
]) 

@Injectable() 
export class AmendmentComponent { 

locale: string; 

constructor() { 

    this.locale = localStorage.getItem('locale'); 
} 

getMainComponent() { 

    if (this.locale == "de") { 
     return MainTestComponent; 
    } 
    else { 
     return MainComponent; 
    } 

} 
}

组件，我导入：

import { MainComponent } from '../amendmentMain/mainComponent'; 
import { MainTestComponent } from '../amendmentMain/mainTestComponent';

正如你看到的，我实现了在routerConfig新AsyncRoute。路径是'/ main /：id/...'

如果语言环境等于“de”，则应该加载MainTestComponent，否则应该加载MainComponent。

我在这里做了什么错？

更新获得对系统的错误，打字稿无法找到它：

setMainComponent() { 

    if (this.locale == "de") { 

     this.router.config([ 
      new AsyncRoute({ 
       path: '/main:id/...', 
       loader:() => System.import(MainComponent).then(m => m.MainTestComponent), 
       name: 'MainComponent' 
      }) 
     ]) 
    } 
    else { 

    } 

}

PDATE：增加了一些index.html文件

<!-- base url --> 
    <base href="/"> 

    <link href="/assets/css/site.css" rel="stylesheet"> 

    <!-- Include lock0 module --> 
    <script src="//cdn.auth0.com/js/lock-8.1.min.js"></script> 

    <script> 
     System.config({ 
     defaultJSExtensions: true 
     }); 
    </script> 

    </head> 
    <body> 

    <app> 
    Loading... 
</app> 

{% if (o.webpackConfig.metadata.ENV === 'development') { %} 
<!-- Webpack Dev Server reload --> 
<script src="http://{%= o.webpackConfig.metadata.host %}:{%=  o.webpackConfig.metadata.port %}/webpack-dev-server.js"></script> 
{% } %} 

    <!-- Webpack HtmlWebpackPlugin manually inject scripts --> 
    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} 
    <script src="{%= o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> 
    {% } %}

来源

2016-03-21 Mandersen

你可以注册不同的路线对于相同的路径，动态地像这样

@RouteConfig([ 
{ path: '/', name: 'Bookings', component: BookingsComponent }, 
{ path: '/bookings', name: 'Bookings', component: BookingsComponent, useAsDefault: true }, 
{ path: '/main/:id/passenger', name: 'Passenger', component: PassengerComponent }, 
{ path: '/main/:id/date', name: 'Date', component: DateComponent }, 
{ path: '/main/:id/vehicle', name: 'Vehicle', component: VehicleComponent }, 
{ path: '/main/:id/confirmation', name: 'Confirmation', component: ConfirmationComponent }, 
{ path: '/main', redirectTo: ["Bookings"] }, 
]) 

@Injectable() 
export class AmendmentComponent { 

locale: string; 

constructor(public router:Router) { 

    this.locale = localStorage.getItem('locale'); 
    this.setMainComponent(); 
} 

setMainComponent() { 

    if (this.locale == "de") { 
     this.router.config([ 
      new AsyncRoute({path: '/main/:id/...', 
      loader:() => System.import('app/path/to/MainTestComponent').then(m => m.MainTestComponent), name: 'MainComponent'}]; 
    } 
    else { 
     this.router.config([ 
      new AsyncRoute({path: '/main/:id/...', 
      loader:() => System.import('app/path/to/MainComponent').then(m => m.MainComponent), name: 'MainComponent'}]; 
    } 

    } 
}

没有异步线路：

if (this.locale == "de") { 
     this.router.config([ 
      { path: '/main/:id/...', name: 'MainComponent', component: MainTestComponent}]; 
    } 
    else { 
     this.router.config([ 
      { path: '/main/:id/...', name: 'MainComponent', component: MainComponent}]); 
    }

来源

2016-03-21 16:31:24

你有什么进口的，所以System.import工作？ – Mandersen

如果您在角度应用程序中使用'SystemJS'，系统'全球可用（不需要导入），除非您另行更改，否则它是默认的应用程序。你有什么错误吗？ –

是的，我得到一个错误..它告诉我无法找到名称系统，已添加代码。 – Mandersen

Angular2：在同一条路径上有条件/另外定义两条Async路由

回答

相关问题