Is it possible to dynamically create router-views? I have some dynamically registered components like:
configureRouter(config: RouterConfiguration, router: Router)
{
const myComponents = viewProvider.getComponents();
const viewPorts = {};
myComponents.forEach((component, idx) =>
{
viewPorts[`my-component-${idx}`] = { moduleId: component };
});
config.map({ route: 'page', name: 'page', viewPorts: viewPorts });
this.router = router;
this.myComponents = myComponents;
}
In the template, I would like to do something like that:
<router-view repeat.for="component of myComponents" name.bind="'my-component-' + $index"></router-view>
Unfortunately this is not working (“no router-view found”). I have the following (kind of ugly) workaround for the moment:
<router-view name="my-component-0"></router-view>
<router-view name="my-component-1"></router-view>
<router-view name="my-component-2"></router-view>
<router-view name="my-component-3"></router-view>
<router-view name="my-component-4"></router-view>
<router-view name="my-component-5"></router-view>