Angular 2 zmieniające zmienne komponentu na innym komponencie

Question

W jaki sposób komponent może zmienić zmienną na innym komponencie. Przykład:

Mam komponent app.component.ts

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

export class AppComponent{ 
    onMain: Boolean; 

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

mam inny składnik, który chcę zmienić onMain w moim app składnika main.component.ts

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

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

export class MainComponent{ 

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

Spodziewam się, że Halo zniknie, ale nie robi. Jak mogę zmienić jeden składnik na innym komponencie?

Answer 1

Przede wszystkim, nie masz połączenie między dwoma komponentami lub może coś nie jest poprawna w kodzie. Jeśli masz scenariusz rodzic/dziecko, możesz użyć wartości @Input,@Output dla kąta2. Jeśli nie masz scenariusza rodzic/dziecko, możesz przejść pod numer EventEmitter,SharedService parametru kątowego2.

Working demo-EventEmitter way

Rozważałam AppComponent jest parentComponent i MainComponent jako składnik dziecięcej. Korzystając z SharedService & EventEmitter koncepcji , mogę ukryć część widoku, klikając przycisk należący do widoku "MainComponent".

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

} 

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

} 

Answer 2

Tak można zmienić wartość zmiennej z jednego elementu do drugiego za to trzeba inject klasę komponentu eksportowane do składnika dominującego w ten sposób jesteś w stanie dotrzeć do każdego i każdy sposób i zmienną wtryskiwanego klasie (składnik).

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

Przykład roboczy http://plnkr.co/edit/fpYFueOnkm5sa4JfG7uX?p=preview

Answer 3

Jeśli nie ma relacja pomiędzy komponentami (mam na myśli rodzic/dziecko), trzeba korzystać z udostępnionego usługi z własności EventEmitter. Jeden komponent będzie emitował zdarzenie na jego podstawie, a ten inny składnik zostanie powiadomiony, subskrybując numer EventEmitter. Po odebraniu zdarzenia, składnik ten może ustawić właściwość używane, aby pokazać/ukryć przycisk ...

• Shared Service

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

  Nie zapomnij zdefiniować odpowiedni dostawcy w boostrap funkcja, aby móc współużytkować to samo wystąpienie usługi dla całej aplikacji: `bootstrap (AppComponent, [SharedService]);

• AppComponent komponent

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

  }

• MainComponent komponent:

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

te pytania Więcej szczegółów:

• Delegation: EventEmitter or Observable in Angular2
• hidding button of another view angular2

Answer 4

Jeśli masz relację rodzic/dziecko, możesz użyć emiter zdarzenia, aby odwrócić zmienną za pomocą zaledwie kilku linii kodu. Nie ma potrzeby pisania całej usługi udostępnionej.

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