我有一个组件有一些HTML代码，有一些select-options和dropdown ...这个组件我希望它与其他组件共享，每个组件都有不同的URL。我做的那样有用，但问题是，当我从一个组件转到另一个组件（一个url到另一个url）时，所选的选项会回到它们的初始状态......我怎样才能使它工作？
共享组件TS
<div class="row">
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Parametros Variables
</div>
<div class="card-block">
<div class="form-group">
<label>Modo :</label>
<select id="selectid" class="form-control-mb-12"
ngModel (ngModelChange)="modo($event)">
<option value="mod1">MODO 1</option>
<option value="mod2">MODO 2</option>
<option value="mod3">MODO 3</option>
</select>
<label>Intervalo de Guarda :</label>
<select class="form-control-mb-12"
(change)="intGua($event.target.value)">
<option value="unCuarto">1/4</option>
<option value="unOctavo">1/8</option>
<option value="unDie">1/16</option>
<option value="unTrein">1/32</option>
</select> <br><br>
One-Seg : <button (click)="change()" id="oneseg" type="button" class="btn btn-sm btn-secondary">Desactivado</button>
<br><br><pre><h4> Capa A Capa B Capa C</h4></pre>
<label>Nº de Segmentos[Ns]</label>
<select class="form-control-mb-12" name="NSegcapaA" >
<option value="unCuarto">0 </option>
<option value="unOctavo">1 </option>
<option value="unDie">2 </option>
<option value="unTrein">3 </option>
<option value="unTrein">4 </option>
<option value="unTrein">5 </option>
<option value="unTrein">6 </option>
<option value="unTrein">7 </option>
<option value="unTrein">8 </option>
<option value="unTrein">9 </option>
<option value="unTrein">10 </option>
<option value="unTrein">11 </option>
<option value="unTrein">12 </option>
<option value="unTrein">13 </option>
</select>
<select class="form-control-mb-12">
<option value="unCuarto">0</option>
<option value="unOctavo">1</option>
<option value="unDie">2</option>
<option value="unTrein">3</option>
<option value="unTrein">4</option>
<option value="unTrein">5</option>
<option value="unTrein">6</option>
<option value="unTrein">7</option>
<option value="unTrein">8</option>
<option value="unTrein">9</option>
<option value="unTrein">10</option>
<option value="unTrein">11</option>
<option value="unTrein">12</option>
<option value="unTrein">13</option>
</select>
<select class="form-control-mb-12">
<option value="unCuarto">0</option>
<option value="unOctavo">1</option>
<option value="unDie">2</option>
<option value="unTrein">3</option>
<option value="unTrein">4</option>
<option value="unTrein">5</option>
<option value="unTrein">6</option>
<option value="unTrein">7</option>
<option value="unTrein">8</option>
<option value="unTrein">9</option>
<option value="unTrein">10</option>
<option value="unTrein">11</option>
<option value="unTrein">12</option>
<option value="unTrein">13</option>
</select> <br><br>
<label>Esquema de Modulacion</label>
<select class="form-control-mb-12">
<option value="unOctavo">16-QAM</option>
<option value="unDie">64-QAM</option>
<option value="unTrein">DQPSK</option>
</select>
<select class="form-control-mb-12">
<option value="unOctavo">16-QAM</option>
<option value="unDie">64-QAM</option>
<option value="unTrein">DQPSK</option>
</select>
<select class="form-control-mb-12">
<option value="unOctavo">16-QAM</option>
<option value="unDie">64-QAM</option>
<option value="unTrein">DQPSK</option>
</select> <br> <br>
<label>Codificacion Convolucional</label>
<select class="form-control-mb-12">
<option value="unOctavo">1/2</option>
<option value="unDie">2/3</option>
<option value="unTrein">3/4</option>
<option value="unTrein">5/6</option>
</select>
<select class="form-control-mb-12">
<option value="unOctavo">1/2</option>
<option value="unDie">2/3</option>
<option value="unTrein">3/4</option>
<option value="unTrein">5/6</option>
</select>
<select class="form-control-mb-12">
<option value="unOctavo">1/2</option>
<option value="unDie">2/3</option>
<option value="unTrein">3/4</option>
<option value="unTrein">5/6</option>
</select>
</div>
</div>
<div class="card-footer">
<button class="btn btn-info btn-sm" (click)="randomize()">Update</button>
</div>
</div>
</div>
</div>
共享组件HTML
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParamVarRoutingModule } from './param-var-routing.module';
import { ParamVarComponent } from './param-var.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ParamVarRoutingModule,
FormsModule,
ReactiveFormsModule
],
declarations: [ParamVarComponent,
],
exports: [ParamVarComponent]
})
export class ParamVarModule { }
共享组件模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParamVarModule} from '../param-var/param-var.module';
@NgModule({
imports: [
CommonModule,
ResumenRoutingModule,
FormsModule,
ReactiveFormsModule,
ParamVarModule,
],
declarations: [ResumenComponent,
]
})
export class ResumenModule { }
**导入前一个组件的组件之一。**
模块
<app-param-var></app-param-var>
HTML
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-resumen',
templateUrl: './resumen.component.html',
styleUrls: ['./resumen.component.scss']
})
export class ResumenComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
TS
{{1}}
答案 0 :(得分：0)
如果我理解正确，您指的是保存组件的状态 每次更改路径并在组件之间切换时，都会调用ngDestroy，因此不会保存状态。
基本上，Angular有一个 RouteReuseStrategy ，这是一个可以自己实现的接口，用于保存状态和重用（参见https://angular.io/api/router/RouteReuseStrategy）。但是，如果您有兄弟/辅助组件而不仅仅是父子级组件，那么这个会给您带来麻烦（目前Angular团队似乎没有解决方案或计划解决此问题，请参阅：https://github.com/angular/angular/issues/13869#issuecomment-294371551）
另一个可用的选项（这是一种解决方法而不是那么漂亮）是拥有服务，它可以存储您的所有数据，您可以随时重复使用。
另一个想法（通过github中的kavi87）是在父组件内部有一个路由器插座来存储状态。
希望这会有所帮助。