Трансляция события в Angular 6 / Typescript - PullRequest
Новая
       15

Трансляция события в Angular 6 / Typescript

0 голосов
/ 11 июня 2018

У меня следующая структура: 

<app>
  <test-a></test-a>
  <test-b></test-b>
</app>

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
})
export class AppComponent {
}    

@Component({
    selector: 'test-a',
    templateUrl: './testa.component.html',
})
export class TestAComponent {
}

@Component({
    selector: 'test-b',
    templateUrl: './testb.component.html',
})
export class TestBComponent {
}

Test B содержит выбираемые элементы.Когда один из них выбран, я бы хотел сказать Тесту А, что этот элемент был выбран ...

Я думаю, что есть 2 варианта, которые, как я знаю, могут этого достичь.

  • Используйте App для сохранения выбранного элемента.Измените этот выбранный элемент в Test B, а затем разрешите Test A реагировать ... но это создает ужасную жесткую связь между Test A и Test B компонентами ... и родительским App составная часть.Мне не нравится эта идея.
  • Создать какую-то службу «Подписчик на событие», которая хранит массив различных наблюдаемых, на которые можно подписаться.Моя текущая реализация здесь (не закончена):

// Требуется модель для моего собственного класса 

export class KeyValuePair<T>
{
    public key: string;
    public value: T;

    construct(key: string, value: T) {
        this.key = key;
        this.value = value;
    }
}

// Как может выглядеть моя реализация (wip) 

import { Observable, of } from "rxjs";
import { KeyValuePair } from "../models/keyvaluepair";
import { Injectable } from "@angular/core";

@Injectable({
    providedIn: 'root',
})
export class EventService<T>
{
    protected subscriptions: KeyValuePair<Observable<T>>[];

    public Broadcast(key: string, value: any)
    {
        var observable = new Observable<T>();
        observable.subscribe((a) =>
        {
            return of(value);
        });

        this.subscriptions.push(
            new KeyValuePair<Observable<T>>(
                key, 
                observable
            )
        );
    }

    public Subscribe(key: string): Observable<T>
    {
        var observable = this.subscriptions.find((sub) => {
            return sub.key == key;
        });

        return observable.value;
    }
}

// Как вы можете создать событие 

this.testEventService.Broadcast("itemSelected", item);

// Как это можно использовать 

this.testEventService.Subscribe("itemSelected").subscribe((item) => {
    this.changeItem(item);
});

Однако, конечно, мне не нужно было писать этот материал..?В angularjs и jquery были трансляции $ и $ on, которые делали жизнь такой простой ... что мне здесь не хватает?Есть ли более простой способ в угловых 6 и машинописном тексте?

Редактировать:

Я сделал услугу, которую могут использовать люди, скажите, пожалуйста, если она отстой: https://jsfiddle.net/jimmyt1988/oy7ud8L3/

1 Ответ

0 голосов
/ 11 июня 2018

вы можете использовать Тема 

export class EventService<T> {
    protected _eventSubject = new Subject();
    public events = this._eventSubject.asObservable();

    dispathEvent(event) {
       this._eventSubject.next(event);
    }
}
...