在各種組件中顯示一個組件的相同數據。 角度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>