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

For clearification/ better 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. The complete example can be visit on https://angulartool.de. 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.

CodePudding user response：

I think this might be a bigger problem than it seems. However, there's still hope and I hope you follow Angular guidelines and build the component accordingly, and have a module with a component as entryComponent in your route config.

THAT entryComponent will be the main entry component of your module which you can store the component information when you route.

So maybe you can try creating the components in the main component, and the main component will retain the info of the components it created.

But do take note that this will not work if you switch between modules.

Another possible solution would be to utilize a service to store the data you need.

CodePudding user response：

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.

CodePudding user response：

This this the component: Kragarm

   ...
 
     public W = new VariableUnitBuilder('W', 'mm³', 0, 'Widerstandsmoment', 'W', false,'xW',false, 'Wy','Wx');
...
        ngOnInit(): void {
        
        
            /*Staffolding the Html */
        
            this.variableList.push(
              this.F,  this.L,
              'br',
              this.Mt, this.Szul,

          'br',
          this.Werf, this.W, 'br', this.S,
              'br',
              this.factor,  this.fzul,
              'br',
              this.Ierf, this.I,
              'br',
              this.f,      
              'br'
            );
          
        
        
            if ( this.storeVar[this.RouteName 'Count'] < 1){ this.storeVar[this.RouteName] =this.variableList}
            this.variableList= this.storeVar.Kragarm
            this.storeVar[this.RouteName 'Count']  
            this.BerechnungsName = this.htmlButtonName;
        
        
          } // END OF ON IN

Kragarm.component.ts

This is the interface for the VariableUnitBuilder

export interface IVariableUnitBuilder {

  varName: string;
  varLabel: string;
  varSymbol: string;

  unitBase: string;
  unit: string;
  scaleSelect: number;

  inputStr: string;
  inputValue: number;
  nominalValue: number;
  ergebnis: boolean;
  showStr: string;
  showValue: number;
  nominalValueOld: number;

  fixActiv: boolean;
  fixStatus: boolean;

  fixLabelStr: string;
  fixTrueLabel: string;
  fixFalseLabel: string;

  fixGroup: string;

}

and this is the service:

import { Injectable } from '@angular/core';
import {IVariableUnitBuilder} from "../../../shared/_intefaces/IVariableUnitBuilder";

@Injectable({
  providedIn: 'root'
})
export class BiegebalkenService {
public Kragarm: IVariableUnitBuilder[]
public KragarmCount: number=0
constructor() { }
}

Biegeblaken.service.ts (next to the spilt child Biegebalken.module.ts)

this is the related HTML for component Kragarm.component.ts

...

<table *ngFor="let variable of  variableList; let i =   index ">
      <tr *ngIf="  (variable).varName !=  undefined ">
  <td >
          <input
            [(ngModel)]='variable.varLabel'
            class='inputLabel'
            jgInputStringRestriction
          >
        </td>

.... Kragarm.component.html

This is the main HTML into app.component.html

...
    <div [routerLink]="['/Kragarm']" >Kragarm</div>
...

app.component.ts

THANKS A LOT FOR YOU KIND SUPPORT AND COMMENTS