Frage Angular 2 ändert die Komponentenvariablen einer anderen Komponente


Wie kann eine Komponente eine Variable in einer anderen Komponente ändern? Beispiel:

Ich habe eine Komponente app.component.ts

@Component({
    selector: 'my-app',
    template: `
    <nav *ngIf="onMain == false">
       Hello
    </nav>
    `
})

export class AppComponent{
  onMain: Boolean;

  constructor(){
      this.onMain = false;
    }
}

Ich habe eine andere Komponente, die ich in meiner App-Komponente ändern möchte main.component.ts

import {AppComponent} from '../app.component';

@Component({
    selector: 'main-app',
    template: ``
})

export class MainComponent{

  constructor() {
      this.appComponent = AppComponent;
      this.appComponent.onMain = true;
    }
}

Ich würde erwarten, dass Hello verschwinden würde, aber das tut es nicht. Wie kann ich mit einer Komponente den Wert einer anderen Komponente ändern?


14
2018-03-02 04:11


Ursprung


Antworten:


Erstens haben Sie keine Verbindung zwischen zwei Komponenten oder vielleicht ist etwas in Ihrem Code nicht richtig. Wenn Sie ein Eltern / Kind-Szenario haben, können Sie es verwenden @Input,@Output von angular2. Wenn Sie kein Eltern / Kind-Szenario haben, können Sie mitgehen EventEmitter,SharedService von angular2.
 
  Arbeitsdemo-EventEmitter Weg

  Ich habe darüber nachgedacht AppComponent ist eine parentComponent und MainComponent als untergeordnete Komponente. Verwenden SharedService & EventEmitter Konzepte von angular2Ich kann mich verstecken AppComponent's Teil der Ansicht, indem Sie auf eine Schaltfläche klicken, die zur Ansicht 'MainComponent' gehört.

AppComponent.ts

import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core';
import {MainComponent} from 'src/MainComponent';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'my-app',
    directives:[MainComponent],
    template: `<h1>AppComponent {{onMain}}</h1>
    <div *ngIf="onMain == false">
       Hello
      <br> __________________________________<br>
    </div>

  <main-app></main-app>
    `
})

export class AppComponent implements OnInit {
  onMain: Boolean;

  constructor(ss: SharedService) {
      this.onMain = false;
      this.ss = ss;
    }



    ngOnInit() {
    this.subscription = this.ss.getEmittedValue()
      .subscribe(item => this.onMain=item);
  }

}

Hauptkomponente.ts

import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'main-app',

    template: `<h1> MainComponent</h1>
    <button (click)="changeName()">Change Name</button>
    `
})

export class MainComponent {



    constructor(ss: SharedService) {
      this.ss = ss;
    }

    changeName() {
      this.ss.change();
    }
}

shared.service.ts

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'


@Injectable()
export class SharedService {
  @Output() fire: EventEmitter<any> = new EventEmitter();

   constructor() {
     console.log('shared service started');
   }

   change() {
    console.log('change started'); 
     this.fire.emit(true);
   }

   getEmittedValue() {
     return this.fire;
   }

} 

16
2018-03-02 06:26



Wenn es keine Beziehung zwischen Komponenten gibt (ich meine Eltern / Kind), müssen Sie einen gemeinsamen Dienst mit einem verwenden EventEmitter Eigentum. Eine Komponente gibt ein Ereignis basierend darauf aus, und diese andere Komponente wird benachrichtigt, indem sie die EventEmitter. Wenn das Ereignis empfangen wird, kann diese Komponente eine Eigenschaft zum Anzeigen / Verbergen der Schaltfläche festlegen ...

  • Gemeinsamer Dienst

    @Injectable()
    export class SharedService {
      onMainEvent: EventEmitter = new EventEmitter();
    }
    

    Vergessen Sie nicht, den entsprechenden Provider in der Bootrap-Funktion zu definieren, um dieselbe Instanz des Dienstes für die gesamte Anwendung zu teilen: `bootstrap (AppComponent, [SharedService]);

  • AppComponent Komponente

    @Component({ ... })
    export class AppComponent {
      onMain: boolean = false;
      constructor(service: MenuService) {
        sharedService.onMainEvent.subscribe(
          (onMain) => {
            this.onMain = onMain;
          }
       );
     }
    

    }

  • MainComponent Komponente:

    export class MainComponent {
      constructor(private service: SharedService) {
      }
    
      updateOnMain(onMain):void {
        this.service.onMainEvent.emit(onMain);
      }
    }
    

Diese Fragen für weitere Details:


8
2018-03-02 05:32



Ja, Sie können den Variablenwert von einer Komponente zu einer anderen Komponente ändern inject Die Komponente exportiert dabei die Klasse in die übergeordnete Komponente Sie können jede Methode und Variable der injizierten Klasse (Komponente) erreichen.

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: `myTemplate.html`,
    directive: [AppComponent2]
})

export class AppComponent {
  variable1: boolean = true;
}

@Component({
    selector: 'my-app2',
    templateUrl: `temp2.html`,
    providers: [AppComponent]
})

export class AppComponent2 {
  constructor(private appComponent: AppComponent){ }
  Fun(){
    console.log('Function Called');
    this.appComponent.variable1 = false;
  }
}


<button (click)='Fun()'>Change Variable</button>

{{appComponent.variable1}}

Arbeitsbeispiel http://plnkr.co/edit/fpYFueOnkm5sa4JfG7uX?p=preview


2
2018-03-02 05:26



Wenn Sie eine Eltern / Kind-Beziehung haben, können Sie einen Ereignisemitter verwenden, um die Variable mit nur ein paar Zeilen Code zu spiegeln. Es besteht keine Notwendigkeit, einen ganzen Shared Service zu schreiben.

app.component.ts

@Component({
    selector: 'my-app',
    template: `
    <nav *ngIf="onMain == false" (observableEvent)="onMain == true">
       Hello
    </nav>
    `
})

main.component.ts

import {AppComponent} from '../app.component';
import { Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'main-app',
    template: ``
})

export class MainComponent{
    @Output() observableEvent: EventEmitter<any> = new EventEmitter<any>();

  constructor() {
      this.appComponent = AppComponent;
      this.observableEvent.emit();
    }
}

0
2018-02-02 22:45