How to use multiple router-outlet in angular2?

Question

I have a main router-outlet, which is used to display a login screen (/login) and the main content screen(which is shown after login) (/main

Answer 1

I think i gather what you are trying to achieve. Can i recommend that you use a variable to mimic some kind of state change, and assign that to the component view. have your app.component.html only contain a router outlet. create a new main.component.html that replicates the existing component.html

``

replace the href in the with *(click)="handleChange()'"

So each link would look as below.

• OVERVIEW

handleChange method: declare the currentLink - public currentLink string; // or public currentLink: string = ''; public handleChange(link: string) { this.currentLink = link; }

create a view.component.

example selector

give the view component an @Input() public link: string;

back to view.component.html 

overview content
overview content

You can then refactor those into seperate child components.

Overview: You are making the app-header a global component that handles a 'link' variable. I would recommend taking a look into ngRx or general app-state methods. As this can be a great way to manage UI.