In my Angular 4.1.3 project, I am currently developing a mapping application that incorporates lazy-loading for various tool modules. At present, the tools are loaded within the map using a router-outlet. However, I now need to expand this functionality to support opening the tool in a new tab alongside the map. These tabs must be dynamically created when loading the tool module and it should be possible to have multiple tabs open simultaneously.
While creating a tab component appears straightforward, the challenge lies in figuring out how to reference the tool's component so that it can be passed to the dynamic component loader for placement within the new tab. Since the tool is part of a lazy-loaded module, obtaining this reference is proving tricky. Is there a way for the router to pass this information to my app.component rather than outputting it through a router-outlet? One potential solution involves hiding the router-outlet within a div and binding to it in the controller, although this approach feels like a temporary workaround with uncertain results.
I've come across similar questions related to SystemJS, but my webpack setup presents different constraints.
UPDATE: I have managed to set up a basic plunker demonstration here: http://plnkr.co/edit/RPbyQZ4LyHN9o9ey2MJT?p=preview
The code in the plunker showcases a simple component being dynamically added to a tab.
export class ContentPaneComponent implements OnInit {
@ViewChild('contentpane') el: ElementRef;
@Output() newContent: EventEmitter<any> = new EventEmitter();
private content: string;
private contentSubscription: Subscription;
private tab1 = new CompItem(htmlPaneComponent, {});
// private tab2 = new CompItem(LayerManagerComponent, {});
ngOnInit(): void {
}
}
The specified component in tab1 must be included in the entry components of the content-pane.module as follows:
entryComponents: [htmlPaneComponent]Ultimately, the goal is to generate new CompItem() instances upon lazily loading modules. When activating a route such as:
{
path: 'search', loadChildren:
'components/conference-room-search/conference-room-search.module#ConferenceRoomSearchModule'
}
I believe the key requirement is for the router to provide a reference to either the module or its components.