javascript - 在 Angular 中的其他组件之间更改 url 时保留 HTML 值(选定的选项、复选框)

Question

我有一个组件，其中包含一些 HTML 代码，以及一些选择选项和下拉菜单...我希望该组件与其他组件共享，每个组件都有不同的 URL。我做到了这一点，但问题是，当我从一个组件转到另一个组件(一个 url 到另一个 url)时，所选选项会返回到其初始状态...我怎样才能使其工作？

共享组件 TS

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;
  }


}

}

共享组件 HTML

<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <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>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                 <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>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                 <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>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
            <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>  &nbsp;&nbsp;
            <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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <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 { 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 { }

HTML

<app-param-var></app-param-var>

TS

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() {



  }



}

Answer 1

如果我理解正确的话，你指的是保存组件的状态。
每次更改路由并在组件之间切换时，都会调用 ngDestroy，因此不会保存状态。

基本上，Angular 有一个 RouteReuseStrategy，这是一个您可以自己实现的接口(interface)，用于保存状态和重用(请参阅 https://angular.io/api/router/RouteReuseStrategy )。但是，如果您有兄弟/辅助组件而不仅仅是父子级组件，那么这个会给您带来麻烦(目前 Angular 团队似乎没有解决方案或计划来解决此问题，请参阅: https://github.com/angular/angular/issues/13869#issuecomment-294371551 )

另一个可用的选项(这是一种解决方法，但不太漂亮)是拥有一个服务来存储您的所有数据，并且您可以随时重复使用它。
另一个想法(由 github 中的 kavi87 提出)是在父组件内有一个路由器导出来存储状态。

希望这有帮助。