Angular Routing: Avoid destroy of active component after changing the url?

Question

The click on

[routerLink]="['/ComponentB']

will result to an another instance of the ComponentB displayed in the

<router-outlet></router-outlet>

This behaviour is what I like to avoid, as I like to reuse a allready existing instance which should be linked to the router-outlet.

---

If you have a formula collection which handles a couple of ng components which are basely build on a collection / array of class objects hold approx. 10 props e.g. include input values, nominal value and at least units and Booleans …, so to keep the page status (input+results) ends into duplicate a lot of stuff.

Therefore, I simulate a routing by using *ngif to display the related parts (component s) of the single page but never change the url.

<div *ngIf="visibleComponentA>
... All part of ComponetA 
  ></div>

CpmponetA.html

<div *ngIf="visibleComponentB>
... All part of ComponetB 
  ></div>

CpmponetB.html

This Boolean will be set inside the relate code of the component:

@Input()visibleComponentA: boolean = true; 

ComponetA.ts

Now in the top page

<div (click)="OnClickNav(visibleComponentA)" >ComponentA</div>
<div (click)="OnClickNav(visibleComponentB)" >ComponentB</div> 

app.component.html

and the method OnClickNav(Selected:NavFlags) switching the correct visible status of the component.

OnClickNav(Selected:NavFlags){

    Selected.NavStatus=!Selected.NavStatus

    Selected.NavItem=='visibleComponetA'? this.visibleComponetA.NavStatus=Selected.NavStatus: this.visibleComponetA.NavStatus= false;
    Selected.NavItem=='visibleComponetB'? this.visibleComponetB.NavStatus=Selected.NavStatus: this.visibleComponetB.NavStatus= false;

app.commonet.ts

The class NavFlags is simple

export class NavFlags {
  NavItem: string = '';
  NavStatus: boolean = false;

  constructor(NavItem: string, NavStatus: boolean) {
    this.NavItem = NavItem;
    this.NavStatus = NavStatus;
  }
}

nav-flags.ts

By this the "individual" pages will not leave an no data are lost. I have no duplicated store.

By clicking the button, it is possible to navigate through the page in components without loss of data.

This hack is not perfect, so maybe there will be better way to solve this angular matter.

Answer 1

To display two components on one page at a time, You can use different outlets.

const routes: Routes = [
  { path: 'A', component: AComponent },
  { path: 'B', component: BComponent, outlet: 'secondRouter' }
]; 

and in your HTML:

<router-outlet></router-outlet>
<router-outlet name='secondRouter'></router-outlet>

Check this StachBlitz for more details.