Pytanie Transmisja rozgłoszeniowa 2


Nowość w Angular 2. Pracuję nad transmisją zdarzenia między komponentem tego samego poziomu. Obecnie wiem, że EventEmitter może po prostu przenieść zdarzenie do komponentu wyższego poziomu.

Sprawdziłem to ten link i wiem, że obserwowalne może być sposobem na rozwiązanie mojego problemu, ale próbka w tym adresie URL nie działa dla mnie.

Czy ktokolwiek wie, jak z niego korzystać (obserwowalne) w przypadku zdarzenia rozgłoszeniowego lub w inny sposób, aby przenieść zdarzenie do komponentów tego samego poziomu?


14
2017-10-26 04:01


pochodzenie


embed.plnkr.co/aJe5SUtFlnpmGXWA5eHk - Difinity


Odpowiedzi:


Trzeba tylko stworzyć usługę, która będzie emitować wiadomości, na które można się zapisać. To może być Observable od rxjs, EventEmitter od node.jslub cokolwiek innego, co następuje Obserwowalny wzór. Następnie należy użyć Dependency Injection, aby wstrzyknąć tę usługę do konkretnych komponentów. Widzieć ten plunker.

class Broadcaster extends EventEmitter {}

@Component({
  selector: 'comp1',
  template: '<div>Generated number: {{ generatedNumber }}</div>',
})
class Comp1 {
  generatedNumber: number = 0;

  constructor(broadcaster: Broadcaster) {
    setInterval(() => {
      broadcaster.next(this.generatedNumber = Math.random());
    },1000);
  }
}

@Component({
  selector: 'comp2',
  template: '<div>Received number: {{ receivedNumber }}</div>',
})
class Comp2 {
  receivedNumber: number = 0;

  constructor(broadcaster: Broadcaster) {
    broadcaster.observer({
      next: generatedNumber => this.receivedNumber = generatedNumber
    });
  }
}

@Component({
  selector: 'app',
  viewProviders: [Broadcaster],
  directives: [Comp1, Comp2],
  template: `
    <comp1></comp1>
    <comp2></comp2>
  `
})
export class App {}

PS W tym przykładzie używam EventEmitter od angle2, ale znowu może być czymkolwiek chcesz


22
2017-10-26 11:36



Dziękuję za odpowiedź i wyjaśnienie pojęcia "obserwowalny wzór". - Garry
Najnowsza wersja kątowego Emitera zmieniła się na obserwowalne broadcaster.subscribe(generatedNumber => this.receivedNumber = generatedNumber); - screenm0nkey
Czy mógłbyś zaktualizować tę odpowiedź dla nowoczesnego Angular 2? Myślę, że jestem blisko, ale mój komponent2 nie łapie zdarzenia, nawet po aktualizacji, aby użyć subskrybowania. - dennis.sheppard


Posługiwać się BehaviorSubject

Usługa:

import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';    

@Injectable()
export class MyService {

   public mySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);


   public doSomething(): void { 
      let myValue: number = 123;
      this.mySubject.next(myValue);
   }
}

Składnik:

@Component({ 
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

   constructor(private myService: MyService) { 
        this.myService.mySubject.subscribe(
             value => {
                console.log(value); 
             }
        );
   }

}

12
2018-02-14 10:16



Użyłem tego podejścia, aby uzyskać zdarzenie kliknięcia paska narzędzi Angular Materials Toolbar, aby otworzyć i zamknąć komponent Sidenav z materiałem kątowym - Pozdrawiam - user1694873