Question

我可以使用一些帮助来使用RouterConfig中的AsyncRoute。我有两个组件，我需要加载并具有相同的路径。

我必须制作一些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。路径是＆＃39; / main /：id /...&# 39;

如果语言环境等于＆＃34; de＆＃34; ，应加载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>
  {% } %}

Answer 1

您可以像这样

动态地为同一路径注册不同的路线

@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：有条件地/可选地在同一路径上定义两个异步路由

1 个答案: