Question

我对如何执行此操作有些困惑。我不断丢失所做的任何更改。我将其作为路线导航声明：

const route: Routes = [
...

    {
        path: 'configs',
        redirectTo: 'configs/entry1'
    },
    {
        path: 'configs/:name',
        component: configPageComponent
    }
...

我可以很好地导航，但是当我在名称之间跳转时，我会松开以以下材料形式编辑的数据：

<div id="infoDiv">
  <mat-form-field>
    <input matInput id="settingsSearch" placeholder="Search">
  </mat-form-field>
  <mat-accordion>
    <mat-expansion-panel #panel_{{databaseName}} expanded="true" hideToggle="true" (click)="changeSetting(this, $event)">
        <mat-expansion-panel-header>
        <mat-panel-title class="tableTitle">
          <span style="display: flex; align-items: top;" class="{{arrowClass}}">
              <svg xmlns="http://www.w3.org/2000/svg"
                  width="30"
                  height="30"
                  viewBox="0 0 30 20">
              <path d = "M3 3 L3 17 L20 10 z" stroke = "#3e6487" stroke-width = "2" fill = "#5b9bd5"/>
            </svg>
          </span>
          <span style="display: flex; align-items: center;" class="settingName">{{databaseName}}&nbsp;&nbsp;Settings</span>
        </mat-panel-title>
      </mat-expansion-panel-header>
  <div style="display: flex; align-items: center;" *ngFor="let settingValues of dbSettings | async; let index = index; trackBy:trackByIndex;">
    <span class="propertyKey" id="settingValues.configName">{{settingValues.configurationName}}</span>
        <mat-form-field class="propertyValue">
          <input matInput [(ngModel)]="settingValues.configValue" id="{{settingValues.configValue}}">
        </mat-form-field>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
</div>

我可以编辑输入字段，但是当我切换到该列表中的另一个条目时：

<div id="configList">
  <h1>Services:</h1>
  <mat-list>
    <h3 matSubheader><span class="healthIconDiv">Health</span><span class="nameDiv">Service</span></h3>
    <mat-list-item *ngFor="let listEntry of dbList | async; last as last">
      <div class="healthIconDiv">
        <div class="healthIcon">TBD</div>
      </div>
      <a routerLink="/config/{{listEntry}}" routerLinkActive="active" class="nameDiv listName">{{listEntry}}</a>
      <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
    </mat-list-item>
  </mat-list>
  <div class="healthIconDiv">
    <div class="healthIcon  goodHealth"></div><div class="healthStatus">Healthy</div>
  </div>
  <div class="healthIconDiv">
    <div class="healthIcon  badHealth"></div><div class="healthStatus">Poor Health</div>
  </div>
 </div>

我放弃了编辑的内容。当我切换到另一个数据库的数据配置时，如何保留已编辑的数据？

这可能有帮助：

页面：https://angular-w6bzvw.stackblitz.io/configuration

编辑：https://stackblitz.com/edit/angular-w6bzvw

Answer 1

感谢大家的帮助。我认为这对其他人有帮助，如果他们有这样的麻烦。

https://stackblitz.com/edit/angular-wthbaq

在同事的帮助下，我想出了一个不错的解决方案。

跳转到路线而不会丢失当前Observable中的数据

1 个答案: