跳转到路由而不丢失当前 Observable 的数据
Jump to route without loosing data from current Observable
我对如何做到这一点有点困惑。我一直在丢失我所做的任何更改。我有这个作为我的路线导航声明:
const route: Routes = [
...
{
path: 'configs',
redirectTo: 'configs/entry1'
},
{
path: 'configs/:name',
component: configPageComponent
}
...
我导航很好,但是当我在名称之间跳转时,我丢失了我以 material 形式编辑的数据:
<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}} 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://stackblitz.com/edit/angular-wthbaq
在一位同事的帮助下,这是我想出的一个还算不错的解决方案。
我对如何做到这一点有点困惑。我一直在丢失我所做的任何更改。我有这个作为我的路线导航声明:
const route: Routes = [
...
{
path: 'configs',
redirectTo: 'configs/entry1'
},
{
path: 'configs/:name',
component: configPageComponent
}
...
我导航很好,但是当我在名称之间跳转时,我丢失了我以 material 形式编辑的数据:
<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}} 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://stackblitz.com/edit/angular-wthbaq
在一位同事的帮助下,这是我想出的一个还算不错的解决方案。