Angular 路由：避免在更改 url 后破坏活动组件？

Question

为了澄清/更好的问题：点击 `

[routerLink]="['/ComponentB']

将导致 ComponentB 的另一个实例显示在

<router-outlet></router-outlet>

我想避免这种行为，因为我喜欢重用一个应该链接到路由器插座的现成实例。

如果你有一个公式集合来处理几个 ng 组件，这些组件基于 class 对象的集合/数组构建，大约包含。 10 个道具包括输入值，标称值和至少单位和布尔值......，所以要保持页面状态（输入+结果）结束重复很多东西。

因此，我模拟了一个路由，使用*ngif来显示单个页面的相关部分（components），但没有改变url。

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

CpmponetA.html

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

CpmponetB.html

这个布尔值将在组件的相关代码中设置：

@Input()visibleComponentA: boolean = true;

ComponetA.ts

现在在首页

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

app.component.html

和方法OnClickNav(Selected:NavFlags)切换组件的正确可见状态。

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

classNavFlags很简单

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

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

导航-flags.ts

这样“个人”页面将不会留下任何数据丢失。我没有重复的商店。完整的例子可以访问https://angulartool.de。通过单击该按钮，可以在不丢失数据的情况下浏览组件中的页面。

这个 hack 并不完美，所以也许会有更好的方法来解决这个 angular 问题。

Answer 1

要一次在一个页面上显示两个组件，您可以使用不同的 outlets。

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

在你的 HTML:

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

查看此 StachBlitz 了解更多详情。

Answer 2

我认为这可能是一个比看起来更严重的问题。但是，仍然有希望，我希望您遵循 Angular 指南并相应地构建组件，并在您的路由配置中拥有一个组件为 entryComponent 的模块。

entryComponent 将是您模块的主要入口组件，您可以在路由时存储组件信息。

所以也许你可以尝试在主组件中创建组件，主组件将保留它创建的组件的信息。

但请注意，如果您在模块之间切换，这将不起作用。

另一种可能的解决方案是利用服务来存储您需要的数据。

Answer 3

这个组件：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

这是 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;

}

这是服务：

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（旁边洒childBiegebalken.module.ts）

这是组件 Kragarm.component.ts

的相关 HTML

...

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

..... Kragarm.component.html

这是主要HTML变成app.component.html

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

app.component.ts

非常感谢您的支持和评论

Angular 路由：避免在更改 url 后破坏活动组件？

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

components

routes

angular