在各种组件中显示一个组件的相同数据。 角度4

Question

您好，我在其他各种组件中显示了一个HTML代码。 在浏览器中，当从一个组件更改为另一个组件时，从共享组件显示的数据也会发生变化..我如何始终保持相同的值。

如果我从选择中选择一个选项，则如果我从一个组件更改为另一个组件，则希望该选项保持不变。

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>
                 <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>
                One-Seg : <button (click)="change()" id="oneseg" type="button" class="btn btn-sm btn-secondary">Desactivado</button>
            </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-info btn-sm" (click)="randomize()">Update</button>
            </div>
        </div>
    </div>
</div>

来自共享组件的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组件

<p>
  resumen works!
</p>

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

我如何将组件导入其他组件

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

Answer 1

您需要将该组件放置在其他组件之外，可能放在AppComponent 。 否则，Angular将重新渲染，并因此重置页面上的组件更改。 然后，只要不在需要它的页面上，就可以* ngIf该组件不在AppComponent之外。

// Shared service

class ShowService {
    showResumen:boolean = false;
}


// In your pages requiring the page

class YourPageNeedingResumenComponent {
    constructor(service: ShowService) {
        service.showResumen = true;
    }
}


// In your pages NOT requiring the page

class YourPageNotNeedingResumenComponent {
    constructor(service: ShowService) {
        service.showResumen = false;
    }
}


// app.component.ts
class AppComponent {
    constructor(service: ShowService, ...otherdependencies) {}
}


// app.component.html

<however you're containing components> </however> // this is your other content
<app-resumen *ngIf="service.showResumen"></app-resumen>