কৌণিক মধ্যে গ্লোবাল ইভেন্টস


224

$scope.emit()বা এর সমতুল্য কি নেই?$scope.broadcast()কৌণিকের ?

আমি EventEmitterকার্যকারিতা জানি , তবে যতদূর আমি বুঝতে পারি যে কেবলমাত্র পিতামাতার এইচটিএমএল উপাদানগুলিতে একটি ইভেন্ট প্রেরণ করবে।

আমার যদি fx এর মধ্যে যোগাযোগের দরকার হয় তবে কী হবে। ভাইবোন বা ডিওএম এর মূলের একটি উপাদান এবং একটি উপাদান বিভিন্ন স্তরের গভীর নীচে বাস করে?


2
আমি একটি ডায়ালগ উপাদান যা DOM মধ্যে যে কোনো স্থানে থেকে অ্যাক্সেস করা যেতে পারে তৈরি এর সাথে সম্পর্কিত একটি অনুরূপ প্রশ্ন ছিল: stackoverflow.com/questions/34572539/... সাধারণত, একজন সমাধান একটি সেবা একটি ঘটনা বিকিরণকারী করা হয়
ব্রান্ডো

1
এখানে আরএক্সজেএস ব্যবহার করে আমার এই জাতীয় পরিষেবার প্রয়োগ হচ্ছে যা সাবস্ক্রিপশন অনুসারে নবমতম মান পেতে পারে। stackoverflow.com/questions/46027693/…
কোডওয়ারিয়র

উত্তর:


385

অ্যাঙ্গুলারজেএস $scope.emit()বা এর সমতুল্য নেই $scope.broadcast()। কোনও উপাদানটির ভিতরে ইভেন্টএমিটারটি নিকটে আসে তবে আপনি যেমন উল্লেখ করেছেন, এটি কেবল তাত্ক্ষণিক প্যারেন্ট উপাদানগুলিতে একটি ইভেন্ট প্রেরণ করবে।

কৌণিক ক্ষেত্রে, অন্যান্য বিকল্প রয়েছে যা আমি নীচে ব্যাখ্যা করার চেষ্টা করব।

@ ইনপুট () বাইন্ডিংগুলি অ্যাপ্লিকেশন মডেলটিকে একটি নির্দেশিত অবজেক্ট গ্রাফের সাথে সংযোগ স্থাপনের অনুমতি দেয় (পাতাগুলিতে মূল)। কোনও উপাদানটির পরিবর্তন সনাক্তকারী কৌশলটির ডিফল্ট আচরণ হ'ল কোনও সংযুক্ত উপাদান থেকে সমস্ত বাইন্ডিংয়ের জন্য অ্যাপ্লিকেশন মডেলে সমস্ত পরিবর্তন প্রচার করা।

পাশে: দুটি ধরণের মডেল রয়েছে: মডেলগুলি এবং অ্যাপ্লিকেশন মডেলগুলি দেখুন। একটি অ্যাপ্লিকেশন মডেল @ ইনপুট () বাইন্ডিংগুলির মাধ্যমে সংযুক্ত। একটি ভিউ মডেল কেবলমাত্র একটি উপাদান সম্পত্তি (@ ইনপুট () দ্বারা সজ্জিত নয়) যা উপাদানগুলির টেমপ্লেটে আবদ্ধ।

আপনার প্রশ্নের উত্তর দিতে:

ভাইবোন উপাদানগুলির মধ্যে যদি আমার যোগাযোগের প্রয়োজন হয় তবে কী হবে?

  1. ভাগ করা অ্যাপ্লিকেশন মডেল : ভাইবোনরা একটি ভাগ করা অ্যাপ্লিকেশন মডেলটির মাধ্যমে যোগাযোগ করতে পারে (ঠিক কৌনিক 1 এর মতো)। উদাহরণস্বরূপ, যখন কোনও ভাইবোন কোনও মডেলটিতে পরিবর্তন করে, অন্য ভাইবোন যে একই মডেলের সাথে বাইন্ডিং রাখে তা স্বয়ংক্রিয়ভাবে আপডেট হয়।

  2. উপাদান ইভেন্টগুলি : শিশু উপাদানগুলি @ আউটপুট () বাইন্ডিং ব্যবহার করে প্যারেন্ট উপাদানগুলিতে একটি ইভেন্ট প্রেরণ করতে পারে। অভিভাবক উপাদান ইভেন্টটি পরিচালনা করতে পারে, এবং অ্যাপ্লিকেশন মডেলটি বা এটির নিজস্ব ভিউ মডেলটি পরিচালনা করতে পারে। অ্যাপ্লিকেশন মডেলের পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সমস্ত উপাদানগুলিতে প্রচারিত হয় যা প্রত্যক্ষ বা অপ্রত্যক্ষভাবে একই মডেলের সাথে আবদ্ধ হয়।

  3. পরিষেবা ইভেন্ট : উপাদানগুলি সদস্যতা নিতে পারে। উদাহরণস্বরূপ, দুটি ভাইবোন উপাদান একই পরিষেবা ইভেন্টের সদস্যতা নিতে এবং তাদের নিজ নিজ মডেলগুলি সংশোধন করে সাড়া দিতে পারে। এই নীচে আরও।

আমি কীভাবে কোনও মূলের উপাদান এবং একটি উপাদানকে নীচের কয়েকটি স্তরের গভীরভাবে যোগাযোগ করতে পারি?

  1. ভাগ করা অ্যাপ্লিকেশন মডেল : অ্যাপ্লিকেশন মডেলটি রুট উপাদান থেকে নীচে @ ইনপুট () বাইন্ডিংয়ের মাধ্যমে গভীরভাবে নেস্ট করা সাব-উপাদানগুলিতে যেতে পারে। যে কোনও উপাদান থেকে একটি মডেল পরিবর্তনগুলি একই মডেলটি ভাগ করে এমন সমস্ত উপাদানগুলিতে স্বয়ংক্রিয়ভাবে প্রচার করবে।
  2. পরিষেবা ইভেন্টগুলি : আপনি ইভেন্টমিটারকে একটি ভাগ করা পরিষেবাতেও স্থানান্তর করতে পারেন যা কোনও উপাদানকে পরিষেবাটি ইনজেক্ট করতে এবং ইভেন্টটির সদস্যতা নিতে দেয়। এইভাবে, একটি রুট উপাদান কোনও পরিষেবা পদ্ধতিতে কল করতে পারে (সাধারণত মডেলটিকে পরিবর্তিত করে), যা ফলস্বরূপ একটি ইভেন্ট নির্গত করে। বেশ কয়েকটি স্তর নীচে, গ্র্যান্ড-চাইল্ড উপাদান যা পরিষেবাটি ইনজেকশনেও একই ইভেন্টে সাবস্ক্রাইব করেছে, এটি পরিচালনা করতে পারে। কোনও ইভেন্ট হ্যান্ডলার যা একটি ভাগ করা অ্যাপ্লিকেশন মডেল পরিবর্তন করে, স্বয়ংক্রিয়ভাবে তার উপর নির্ভর করে এমন সমস্ত উপাদানগুলিতে প্রচার করবে। এটি সম্ভবত $scope.broadcast()কৌনিক 1 এর নিকটতম সমতুল্য পরবর্তী অংশটি এই ধারণাটিকে আরও বিশদে বিশদে বর্ণনা করেছে।

পরিবর্তনগুলি প্রচারের জন্য পরিষেবা ইভেন্টগুলি ব্যবহার করে এমন একটি পর্যবেক্ষণযোগ্য পরিষেবার উদাহরণ

এখানে পর্যবেক্ষণযোগ্য পরিষেবার একটি উদাহরণ যা পরিবর্তনের প্রচারের জন্য পরিষেবা ইভেন্টগুলি ব্যবহার করে। যখন কোনও টোডো আইটেম যুক্ত করা হয়, পরিষেবাটি তার উপাদান সাবস্ক্রাইবারদের সূচিত করে একটি ইভেন্ট প্রেরণ করে।

export class TodoItem {
    constructor(public name: string, public done: boolean) {
    }
}
export class TodoService {
    public itemAdded$: EventEmitter<TodoItem>;
    private todoList: TodoItem[] = [];

    constructor() {
        this.itemAdded$ = new EventEmitter();
    }

    public list(): TodoItem[] {
        return this.todoList;
    }

    public add(item: TodoItem): void {
        this.todoList.push(item);
        this.itemAdded$.emit(item);
    }
}

এখানে কোনও মূল উপাদান কীভাবে ইভেন্টটির সাবস্ক্রাইব করবে:

export class RootComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        // do something with added item
        this.addedItem = item;
    }
}

একটি শিশু উপাদান বিভিন্ন স্তরের নীস্টে একইভাবে ইভেন্টটির সাবস্ক্রাইব করবে:

export class GrandChildComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        // do something with added item
        this.addedItem = item;
    }
}

ইভেন্টটি ট্রিগার করতে পরিষেবাটিকে কল করে এমন উপাদানটি এখানে রয়েছে (এটি উপাদান গাছের যে কোনও জায়গায় থাকতে পারে):

@Component({
    selector: 'todo-list',
    template: `
         <ul>
            <li *ngFor="#item of model"> {{ item.name }}
            </li>
         </ul>
        <br />
        Add Item <input type="text" #txt /> <button (click)="add(txt.value); txt.value='';">Add</button>
    `
})
export class TriggeringComponent{
    private model: TodoItem[];

    constructor(private todoService: TodoService) {
        this.model = todoService.list();
    }

    add(value: string) {
        this.todoService.add(new TodoItem(value, false));
    }
}

রেফারেন্স: কৌণিক মধ্যে সনাক্তকরণ পরিবর্তন


27
আমি পর্যবেক্ষণযোগ্য বা ইভেন্টএমিটারের জন্য কয়েকটি পোস্টে এখন পিছনে দেখেছি - যেমন itemAdded$। এটি কোনও আরএক্সজেএস কনভেনশন বা কিছু? এটা কোথা থেকে আসে?
রাজকোক

1
চমৎকার উত্তর. আপনি বলেছিলেন, "অ্যাপ্লিকেশন মডেলের পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সমস্ত উপাদানগুলিতে প্রচারিত হয় যা প্রত্যক্ষ বা অপ্রত্যক্ষভাবে একই মডেলের সাথে আবদ্ধ হয়" " আমার একটা কুঁচি আছে যে এটি এইভাবে বেশ কার্যকর হয় না (তবে আমি নিশ্চিত নই)। সাবকিনের অন্যান্য ব্লগ পোস্টstreet অ্যাপের মডেলটির সম্পত্তি পরিবর্তন করার জন্য একটি উপাদানটির উদাহরণ দেয় , তবে যেহেতু অ্যাঙ্গুলার 2 প্রয়োগ বা পরিচয় / রেফারেন্স দ্বারা সনাক্তকরণ পরিবর্তন করে, কোনও পরিবর্তন প্রচার করা onChangesহয় না ( বলা হয় না), কারণ অ্যাপ্লিকেশন মডেলের রেফারেন্স পরিবর্তন হয়নি ( নিয়ম ...)
রাজকোক

10
আপনি পরিষেবাটিতে ইভেন্টএমিটারের পরিবর্তে একটি পর্যবেক্ষণযোগ্য ব্যবহারের জন্য নিজের উত্তরটি আপডেট করতে চাইতে পারেন। দেখুন stackoverflow.com/a/35568924/215945 এবং stackoverflow.com/questions/36076700
মার্ক Rajcok

2
হ্যাঁ, প্রত্যয় $ হ'ল একটি আরএক্সজেএস কনভেনশন যা সাইকেল.জেএস দ্বারা জনপ্রিয়। ਚੱਕਰ.js.org/…
টেট

4
আপনার কোনও ম্যানুয়ালি কোনও সন্নিবেশকের সাবস্ক্রাইব করা উচিত নয়। এটি চূড়ান্ত প্রকাশে একটি পর্যবেক্ষণযোগ্য নাও হতে পারে! এটি দেখুন: bennadel.com/blog/…
নেটপ্রোভাক

49

ইভেন্টগুলি হ্যান্ডেল করার জন্য একটি ভাগ করা পরিষেবা ব্যবহার করে কৌনিক 2 এ $ স্কোপ.ইমিট () বা $ স্কোপ.ব্রোডকাস্ট () এর প্রতিস্থাপনের উদাহরণ হিসাবে নিম্নলিখিত কোড ।

import {Injectable} from 'angular2/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class EventsService {
    constructor() {
        this.listeners = {};
        this.eventsSubject = new Rx.Subject();

        this.events = Rx.Observable.from(this.eventsSubject);

        this.events.subscribe(
            ({name, args}) => {
                if (this.listeners[name]) {
                    for (let listener of this.listeners[name]) {
                        listener(...args);
                    }
                }
            });
    }

    on(name, listener) {
        if (!this.listeners[name]) {
            this.listeners[name] = [];
        }

        this.listeners[name].push(listener);
    }

    off(name, listener) {
        this.listeners[name] = this.listeners[name].filter(x => x != listener);
    }

    broadcast(name, ...args) {
        this.eventsSubject.next({
            name,
            args
        });
    }
}

ব্যবহারের উদাহরণ:

ব্রডকাস্ট:

function handleHttpError(error) {
    this.eventsService.broadcast('http-error', error);
    return ( Rx.Observable.throw(error) );
}

লিসেনার:

import {Inject, Injectable} from "angular2/core";
import {EventsService}      from './events.service';

@Injectable()
export class HttpErrorHandler {
    constructor(eventsService) {
        this.eventsService = eventsService;
    }

    static get parameters() {
        return [new Inject(EventsService)];
    }

    init() {
        this.eventsService.on('http-error', function(error) {
            console.group("HttpErrorHandler");
            console.log(error.status, "status code detected.");
            console.dir(error);
            console.groupEnd();
        });
    }
}

এটি একাধিক যুক্তি সমর্থন করতে পারে:

this.eventsService.broadcast('something', "Am I a?", "Should be b", "C?");

this.eventsService.on('something', function (a, b, c) {
   console.log(a, b, c);
});

এটি কি করে? স্ট্যাটিক গেট প্যারামিটার () {রিটার্ন [নতুন ইনজেকশন (ইভেন্টস সার্ভিস)]; }
বিনওয়াহ

এই উদাহরণে আমি আয়নিক 2 ফ্রেমওয়ার্ক ব্যবহার করছি। স্ট্র্যাটিক পরামিতি পদ্ধতিটি বলা হয় যখন কনস্ট্রাক্টর পদ্ধতিটি চালু করা হয় এবং কনস্ট্রাক্টরের নির্ভরতা সরবরাহ করতে ব্যবহৃত হয়। ব্যাখ্যা এখানে stackoverflow.com/questions/35919593/...
jim.taylor.1974

1
সুন্দরভাবে সম্পন্ন. সহজ এবং পুরো অ্যাপ্লিকেশনের জন্য কেবল একটি অফ-অফ নয়, সহজেই মানিয়ে নিতে সক্ষম নোটিফিকেশন সিস্টেম সরবরাহ করে।
মাইক এম

আমি সবেমাত্র ওয়াইল্ডকার্ড সমর্থন সহ অনুরূপ পরিষেবা তৈরি করেছি। আশা করি এটা সাহায্য করবে. github.com/govorov/ng-radio
স্ট্যানিস্লাভ ই।

2
দুর্দান্ত, এটি ব্যবহার করেছেন তবে আর আগ্রহী হলে একটি অফ ফাংশন যুক্ত করেছেন: off(name, listener) { this.listeners[name] = this.listeners[name].filter(x => x != listener); }
LVDM

16

আমি একটি বার্তা পরিষেবা ব্যবহার করছি যা একটি rxjs মোড়ানো Subject ( )

প্লাঙ্কার উদাহরণ: বার্তা পরিষেবা

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter'
import 'rxjs/add/operator/map'

interface Message {
  type: string;
  payload: any;
}

type MessageCallback = (payload: any) => void;

@Injectable()
export class MessageService {
  private handler = new Subject<Message>();

  broadcast(type: string, payload: any) {
    this.handler.next({ type, payload });
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler
      .filter(message => message.type === type)
      .map(message => message.payload)
      .subscribe(callback);
  }
}

উপাদানগুলি ইভেন্টগুলি (প্রেরক) সাবস্ক্রাইব এবং সম্প্রচার করতে পারে:

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'sender',
  template: ...
})
export class SenderComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];
  private messageNum = 0;
  private name = 'sender'

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe(this.name, (payload) => {
      this.messages.push(payload);
    });
  }

  send() {
    let payload = {
      text: `Message ${++this.messageNum}`,
      respondEvent: this.name
    }
    this.messageService.broadcast('receiver', payload);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

(প্রাপক)

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'receiver',
  template: ...
})
export class ReceiverComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('receiver', (payload) => {
      this.messages.push(payload);
    });
  }

  send(message: {text: string, respondEvent: string}) {
    this.messageService.broadcast(message.respondEvent, message.text);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

subscribeপদ্ধতি MessageServiceআয় একটি rxjs Subscriptionবস্তু, যার তাই মত থেকে সদস্যতা ত্যাগ করা যেতে পারে:

import { Subscription } from 'rxjs/Subscription';
...
export class SomeListener {
  subscription: Subscription;

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('someMessage', (payload) => {
      console.log(payload);
      this.subscription.unsubscribe();
    });
  }
}

এই উত্তরটিও দেখুন: https://stackoverflow.com/a/36782616/1861779

প্লাঙ্কার উদাহরণ: বার্তা পরিষেবা


2
খুবই মূল্যবান. উত্তর করার জন্য ধন্যবাদ. আমি সবেমাত্র জানতে পেরেছি যে আপনি এইভাবে দুটি পৃথক মডিউলটিতে দুটি উপাদানগুলির সাথে যোগাযোগ করতে পারবেন না । লক্ষ্য অর্জনের জন্য আমাকে সেখানে সরবরাহকারীদের যুক্ত করে অ্যাপ্লিকেশন।মডিয়ুল স্তরে বার্তা পরিষেবাটি নিবন্ধিত করতে হয়েছিল। যে কোনও উপায়ে এটি সত্যিই দুর্দান্ত উপায়।
রুকশন দাঙ্গাল্লা

এই সমস্ত দুর্ভাগ্যজনকভাবে তারিখের বাইরে। বিশেষত প্লামকার যা কোনও সংস্থান সফলভাবে লোড করে না। তারা সমস্ত 500 ত্রুটি কোড।
তাতসু

আমি পেতেProperty 'filter' does not exist on type 'Subject<EventMessage>'.
ড্রিউ

আরক্সজেএস ব্যবহারের নতুন সংস্করণগুলিতে @ ড্রু this.handler.pipe(filter(...))লেটটেবল অপারেটরগুলি দেখুন ।
t.888

1
@ t.888 ধন্যবাদ, আমি এটি খুঁজে বের করতে পারেন। আপডেট মত ফাংশন সৌন্দর্য সাবস্ক্রাইবreturn this.handler.pipe( filter(message => message.type === type), map(message => message.payload) ).subscribe(callback);
ড্রিউ

12

ব্যবহার করবেন নাআপনার পরিষেবা যোগাযোগের জন্য ইভেন্টএমিটার ।

আপনার পর্যবেক্ষণযোগ্য ধরণের একটি ব্যবহার করা উচিত। আমি ব্যক্তিগতভাবে বিহেভিয়ারসুব্যাক্ট পছন্দ করি।

সাধারণ উদাহরণ:

আপনি প্রাথমিক অবস্থা পাস করতে পারেন, এখানে আমি নাল পাস করছি

let সাবজেক্ট = new BehaviourSubject (নাল);

আপনি যখন বিষয়টি আপডেট করতে চান

subject.next (myObject)

যে কোনও পরিষেবা বা উপাদান থেকে পর্যবেক্ষণ করুন এবং নতুন আপডেটগুলি এলে কাজ করুন।

subject.subscribe (this.YOURMETHOD);

এখানে আরও তথ্য।


1
আপনি কি এই ডিজাইনের সিদ্ধান্তের কারণগুলি বিশদভাবে বলতে পারেন?
এমট্রুট

@ এমট্রুট সেই লিঙ্কটিরও একটি বিস্তৃত ব্যাখ্যা রয়েছে।
ড্যানিয়েল কালবাসি

কীভাবে BehaviourSubject ব্যবহার করবেন সে সম্পর্কে বিস্তারিত তথ্যের জন্য দয়া করে এই নিবন্ধটি পড়ুন ব্লগ.ক্লাউডবুস্ট.আইও / /
রাফালকাস

নিখুঁতভাবে আমার যা প্রয়োজন। দুর্দান্ত এবং সাধারণ :)
কম

8

আপনি ডিআই-এর সাথে নিবন্ধিত একটি ইভেন্টবাস পরিষেবা তৈরি করতে আপনি ইভেন্টমিটার বা পর্যবেক্ষণযোগ্য ব্যবহার করতে পারেন । অংশ নিতে চায় এমন প্রতিটি উপাদান কেবল কন্সট্রাক্টর প্যারামিটার হিসাবে পরিষেবাটি অনুরোধ করে এবং ইভেন্টগুলিতে এমিট করে এবং / অথবা সাবস্ক্রাইব করে।

আরো দেখুন


2

আমার প্রিয় উপায়টি হ'ল আমার সমস্ত উপ-উপাদানকে নিয়ন্ত্রণ করতে আমার পরিষেবাতে আচরণের বিষয় বা ইভেন্ট ইমিটার (প্রায় একই) ব্যবহার করা।

কৌণিক ক্লিপ ব্যবহার করে, একটি নতুন পরিষেবা তৈরি করতে এনজি জিএস চালান তারপরে একটি বিহেভিয়ারসুবজেক্ট বা ইভেন্টইমিটার ব্যবহার করুন

export Class myService {
#all the stuff that must exist

myString: string[] = [];
contactChange : BehaviorSubject<string[]> = new BehaviorSubject(this.myString);

   getContacts(newContacts) {
     // get your data from a webservices & when you done simply next the value 
    this.contactChange.next(newContacts);
   }
}

আপনি যখন এটি করেন যে সরবরাহকারী হিসাবে আপনার পরিষেবাটি ব্যবহার করে প্রতিটি উপাদান পরিবর্তন সম্পর্কে সচেতন হবে। ইভেন্টএমিটারের সাথে আপনি যেমন করেন ঠিক তেমনই সাবস্ক্রাইব করুন;)

export Class myComp {
#all the stuff that exists like @Component + constructor using (private myService: myService)

this.myService.contactChange.subscribe((contacts) => {
     this.contactList += contacts; //run everytime next is called
  }
}

1

আমি এখানে একটি পাব-সাব নমুনা তৈরি করেছি:

http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0

ধারণাটি হ'ল আরএক্সজেএস সাবজেক্টগুলি একটি পর্যবেক্ষক এবং তারজমাবলীর সাথে কাস্টম ইভেন্টগুলি নির্গমন ও সাবস্ক্রাইব করার জন্য জেনেরিক সমাধান হিসাবে তারের জন্য ব্যবহার করতে হবে। আমার নমুনায় আমি ডেমো উদ্দেশ্যে একটি গ্রাহক অবজেক্ট ব্যবহার করি

this.pubSubService.Stream.emit(customer);

this.pubSubService.Stream.subscribe(customer => this.processCustomer(customer));

এখানে একটি লাইভ ডেমোও রয়েছে: http://www.syntaxsuccess.com/angular-2-sams/#/demo/pub-sub


1

এটি আমার সংস্করণ:

export interface IEventListenr extends OnDestroy{
    ngOnDestroy(): void
}

@Injectable()
export class EventManagerService {


    private listeners = {};
    private subject = new EventEmitter();
    private eventObserver = this.subject.asObservable();


    constructor() {

        this.eventObserver.subscribe(({name,args})=>{



             if(this.listeners[name])
             {
                 for(let listener of this.listeners[name])
                 {
                     listener.callback(args);
                 }
             }
        })

    }

    public registerEvent(eventName:string,eventListener:IEventListenr,callback:any)
    {

        if(!this.listeners[eventName])
             this.listeners[eventName] = [];

         let eventExist = false;
         for(let listener of this.listeners[eventName])
         {

             if(listener.eventListener.constructor.name==eventListener.constructor.name)
             {
                 eventExist = true;
                 break;
             }
         }

        if(!eventExist)
        {
             this.listeners[eventName].push({eventListener,callback});
        }
    }

    public unregisterEvent(eventName:string,eventListener:IEventListenr)
    {

        if(this.listeners[eventName])
        {
            for(let i = 0; i<this.listeners[eventName].length;i++)
            {

                if(this.listeners[eventName][i].eventListener.constructor.name==eventListener.constructor.name)
                {
                    this.listeners[eventName].splice(i, 1);
                    break;
                }
            }
        }


    }


    emit(name:string,...args:any[])
    {
        this.subject.next({name,args});
    }
}

ব্যবহার করুন:

export class <YOURCOMPONENT> implements IEventListener{

  constructor(private eventManager: EventManagerService) {


    this.eventManager.registerEvent('EVENT_NAME',this,(args:any)=>{
       ....
    })


  }

  ngOnDestroy(): void {
    this.eventManager.unregisterEvent('closeModal',this)
  }

}

নির্গত:

 this.eventManager.emit("EVENT_NAME");

0

আমরা একটি এনজিওমডেল চেঞ্জ পর্যবেক্ষণযোগ্য নির্দেশনাটি প্রয়োগ করেছি যা ইভেন্ট ইভেন্টের মাধ্যমে সমস্ত মডেল পরিবর্তন প্রেরণ করে যা আপনি নিজের উপাদানটিতে ইনস্ট্যান্ট করেন। আপনাকে কেবল আপনার ইভেন্টের প্রেরককে নির্দেশের সাথে আবদ্ধ করতে হবে।

দেখুন: https://github.com/atomicbit/angular2-modelchangeobservable

এইচটিএমএলে, আপনার ইভেন্টের প্রেরককে বাঁধুন (এই উদাহরণে দেশ পরিবর্তন করা):

<input [(ngModel)]="country.name"
       [modelChangeObservable]="countryChanged" 
       placeholder="Country"
       name="country" id="country"></input>

আপনার টাইপ স্ক্রিপ্ট অংশে ইভেন্ট ইভেন্টে কিছু অ্যাসিঙ্ক অপারেশন করুন:

import ...
import {ModelChangeObservable} from './model-change-observable.directive'


@Component({
    selector: 'my-component',
    directives: [ModelChangeObservable],
    providers: [],
    templateUrl: 'my-component.html'
})

export class MyComponent {

    @Input()
    country: Country

    selectedCountries:Country[]
    countries:Country[] = <Country[]>[]
    countryChanged:EventEmitter<string> = new EventEmitter<string>()


    constructor() {

        this.countryChanged
            .filter((text:string) => text.length > 2)
            .debounceTime(300)
            .subscribe((countryName:string) => {
                let query = new RegExp(countryName, 'ig')
                this.selectedCountries = this.countries.filter((country:Country) => {
                    return query.test(country.name)
                })
            })
    }
}

0

পরিষেবা ইভেন্টগুলি: উপাদানগুলি ইভেন্ট ইভেন্টগুলিতে সদস্যতা নিতে পারে। উদাহরণস্বরূপ, দুটি ভাইবোন উপাদান একই পরিষেবা ইভেন্টের সদস্যতা নিতে এবং তাদের নিজ নিজ মডেলগুলি সংশোধন করে সাড়া দিতে পারে। এই নীচে আরও।

তবে এটি নিশ্চিত করুন যে এটি প্যারেন্ট উপাদানটি ধ্বংস করে দেবে uns

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.