Menu
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.
I have to make some if else statement where I can control what component should be loaded.
Code:
@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;
}
}
}
Components that I import:
import { MainComponent } from '../amendmentMain/mainComponent';
import { MainTestComponent } from '../amendmentMain/mainTestComponent';
As you see, I implemented the new AsyncRoute in the routerConfig. The path is the '/main/:id/...'
If locale is equal to "de" , the MainTestComponent should be loaded, and else the MainComponent should be loaded.
What have I done wrong here?
Update getting an error on system, typescript can't find it:
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: added some of index.html file
<!-- 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>
{% } %}
653
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'}];
}
}
}
Without Async Routes:
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}]);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
