Javascript 在其他组件之间更改url时保留HTML值（选中选项，复选框）
我有一个组件，有一些HTML代码，一些选择选项和下拉列表。。。这个组件我希望它与其他组件共享，每个组件都有一个不同的URL。我做到了这一点，但问题是，当我从一个组件转到另一个组件（从一个url转到另一个url）时，所选选项会返回到其初始状态。。。我怎样才能让它工作 共享组件TSJavascript 在其他组件之间更改url时保留HTML值（选中选项，复选框）,javascript,angular,Javascript,Angular,我有一个组件，有一些HTML代码，一些选择选项和下拉列表。。。这个组件我希望它与其他组件共享，每个组件都有一个不同的URL。我做到了这一点，但问题是，当我从一个组件转到另一个组件（从一个url转到另一个url）时，所选选项会返回到其初始状态。。。我怎样才能让它工作 共享组件TS import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-param-var', templateUrl: '
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-param-var',
templateUrl: './param-var.component.html',
styleUrls: ['./param-var.component.scss']
})
export class ParamVarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
change(){
var change = document.getElementById("oneseg");
if (change.innerHTML === "Desactivado")
{
change.innerHTML = "Activado";
}
else {
change.innerHTML = "Desactivado";
}
}
modo(value: string){
switch(value) {
case "mod1":
console.log ("WORKS MODO 1");
break;
case "mod2":
console.log ("WORKS MODO 2");
break;
case "mod3":
console.log ("WORKS MODO 3");
break;
}
}
intGua(value : string) {
switch(value) {
case "unCuarto":
console.log ("WORKS 1/4");
break;
case "unOctavo":
console.log ("WORKS 1/8");
break;
case "unDie":
console.log ("WORKS 1/16");
break;
case "unTrein":
console.log ("WORKS 1/32");
break;
}
}
}
<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>
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() {
}
}
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>
<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>
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() {
}
}
如果我理解正确，您指的是保存组件的状态。
每次更改路由和在组件之间切换时，都会调用ngDestroy，因此不会保存状态 基本上，Angular有一个RouterUseStrategy，这是一个可以自己实现的接口，用于保存状态和重用（请参阅）。但是，如果您有兄弟/辅助组件，而不仅仅是父子级组件，那么这一个将给您带来麻烦（目前Angular团队似乎没有解决方案或计划来解决此问题，请参阅：） 另一个可用的选项（这是一个变通办法，不太好看）是提供一个服务，该服务存储所有数据，您可以随时重用这些数据。
另一个想法（由github中的kavi87提出）是在父组件中有一个路由器出口来存储状态
希望这有帮助。如果我理解正确，您指的是保存组件的状态。
每次更改路由和在组件之间切换时，都会调用ngDestroy，因此不会保存状态 基本上，Angular有一个RouterUseStrategy，这是一个可以自己实现的接口，用于保存状态和重用（请参阅）。但是，如果您有兄弟/辅助组件，而不仅仅是父子级组件，那么这一个将给您带来麻烦（目前Angular团队似乎没有解决方案或计划来解决此问题，请参阅：） 另一个可用的选项（这是一个变通办法，不太好看）是提供一个服务，该服务存储所有数据，您可以随时重用这些数据。
另一个想法（由github中的kavi87提出）是在父组件中有一个路由器出口来存储状态
希望这能有所帮助。您不需要服务来保持跟踪吗？@Vega如何做到这一点？你能给我举个例子吗。。。如何将html代码与服务关联？您不需要服务来跟踪吗？@Vega如何实现？你能给我举个例子吗。。。如何将html代码与服务关联？如何告诉所选内容保留在存储的值中？您需要创建一个存储所选内容的服务。这可以通过许多不同的方式来完成-您可以将选择存储为组件属性，并在ngDestroy上调用服务来保存它。或者您可以使用DOM元素访问它们，并将它们的值存储在该服务中。我理解您说的将数据保存在该服务中。但我不知道如何在html代码的视图中保持选中的选项。如果要保存选中的值，则在初始化组件（ngOnInit）时，您必须检查服务中保存的数据并将其还原，其中还包括在表单数据中设置选中的值/文本等。您还应该考虑如何使用我所选择的值来保存所存储的值？您需要创建一个存储所选值的服务。这可以通过许多不同的方式来完成-您可以将选择存储为组件属性，并在ngDestroy上调用服务来保存它。或者您可以使用DOM元素访问它们，并将它们的值存储在该服务中。我理解您说的将数据保存在该服务中。但我不知道如何在html代码的视图中保持选中的选项。如果要保存选中的值，则在初始化组件（ngOnInit）时，您必须检查服务中保存的数据并将其还原，其中还包括在表单数据中设置选中的值/文本等。你也应该考虑使用