Angular2:有条件/替代地在同一路径上定义两条异步路由 [英] Angular2: Define two Async routes on the same path conditionally/ alternatively
本文介绍了Angular2:有条件/替代地在同一路径上定义两条异步路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以使用一些帮助在RouterConfig中使用AsyncRoute.我有两个组件，需要加载并具有相同的路径.
I could use some help to use the AsyncRoute in the RouterConfig. I have two components, that I need to load and have on the same path.
我必须做一些if else语句，在这里我可以控制应该加载什么组件.
I have to make some if else statement where I can control what component should be loaded.
代码:
@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/...'
As you see, I implemented the new AsyncRoute in the routerConfig. The path is the '/main/:id/...'
如果语言环境等于"de"，则应加载MainTestComponent，否则应加载MainComponent.
If locale is equal to "de" , the MainTestComponent should be loaded, and else the MainComponent should be loaded.
我在这里做错了什么?
更新时出现系统错误，打字稿找不到:
setMainComponent() {
if (this.locale == "de") {
this.router.config([
new AsyncRoute({
path: '/main:id/...',
loader: () => System.import(MainComponent).then(m => m.MainTestComponent),
name: 'MainComponent'
})
])
}
else {
}
}
日期:添加了一些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>
{% } %}
推荐答案
您可以动态地为同一路径注册不同的路由
You can register different routes for the same path, dynamically like this
@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}]);
}
这篇关于Angular2:有条件/替代地在同一路径上定义两条异步路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
