অ্যাঙ্গুলার 2 এ কোনও পরিষেবাতে কীভাবে কোনও ইভেন্টের সাবস্ক্রাইব করবেন?

Question

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

<component-with-event (myevent)="mymethod($event)" />

আমার যখন এই জাতীয় উপাদান থাকে তখন সবকিছু দুর্দান্ত কাজ করে। আমি একটি যুক্তিতে কিছু যুক্তি সরিয়ে নিয়েছি এবং পরিষেবাটির ভেতর থেকে আমার একটি ইভেন্ট বাড়াতে হবে। আমি যা করেছি তা হ'ল:

export class MyService {
  myevent: EventEmitter = new EventEmitter();

  someMethodThatWillRaiseEvent() {
    this.myevent.next({data: 'fun'});
  }
}

আমার একটি উপাদান রয়েছে যা এই ইভেন্টের উপর ভিত্তি করে কিছু মান আপডেট করতে হবে তবে আমি এটি কার্যকর করে দেখছি না। আমি যা চেষ্টা করেছি তা হ'ল:

//Annotations...
export class MyComponent {
  constructor(myService: MyService) {
    //myService is injected properly and i already use methods/shared data on this.
    myService.myevent.on(... // 'on' is not a method <-- not working
    myService.myevent.subscribe(.. // subscribe is not a method <-- not working
  }
}

পরিষেবাটি যে উত্থাপন করে কোনও উপাদান নয়, তখন আমি কীভাবে মাইকমম্পোনেন্টটিকে ইভেন্টটির সদস্যতা দেব?

আমি 2.0.0-alpha.28 এ আছি

সম্পাদনা: প্রকৃতপক্ষে কাজ করতে আমার "কার্যনির্বাহী উদাহরণ" পরিবর্তিত হয়েছে, তাই অ-কার্যকারী অংশে ফোকাস দেওয়া যেতে পারে;)

উদাহরণ কোড: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

Comments

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

— কৌনিক বিশ্ববিদ্যালয়

@ ঝাদেদেব আমি তোমাকে পড়েছি। আমি সমাধানটি নতুন করে ডিজাইন করেছি যাতে পরিষেবাটির আর ফলাফল প্রকাশের প্রয়োজন হয় না। আমি এখনও মনে করি যে কিছু নকশাগুলি ইভেন্টগুলি বাড়িয়ে তুলতে সক্ষম হতে পারে - এটি কী ধরণের "পরিষেবা" - তার উপর নির্ভর করে ...

— পার হর্নশেজ-শোয়ারবেক

তারপরে একটি উপায় হ'ল উপাদানটি পরিষেবার পরিবর্তে ইভেন্ট প্রেরক তৈরি করতে পারে এবং তারপরে ইভেন্টের প্রেরকটিকে পরিষেবাতে যুক্তি হিসাবে পাস করতে পারে

— কৌনিক বিশ্ববিদ্যালয়

Answer 1

আপডেট : আমি ইভেন্টএমিটারের চেয়ে বিহেভিয়ারসউজেক্ট বা একটি পর্যবেক্ষণযোগ্য ব্যবহার করে এই সমস্যা সমাধানের জন্য আরও ভাল / সঠিক উপায়টি পেয়েছি। দয়া করে এই উত্তরটি দেখুন: https://stackoverflow.com/a/35568924/215945

এছাড়াও, কৌণিক ডক্সে এখন একটি কুকবুক উদাহরণ রয়েছে যা সাবজেক্ট ব্যবহার করে ।

---

আসল / পুরানো / ভুল উত্তর: আবার কোনও পরিষেবায় ইভেন্টএমিটার ব্যবহার করবেন না । এটি একটি অ্যান্টি-প্যাটার্ন।

বিটা 1 ব্যবহার করে ... ন্যাভ সার্ভিস এ ইভেন্টইমিটার রয়েছে। কম্পোনেন্ট নেভিগেশন পরিষেবাটির মাধ্যমে ইভেন্টগুলি নির্গত করে এবং উপাদান পর্যবেক্ষণকারী উপাদান ইভেন্টগুলিতে সদস্যতা গ্রহণ করে।

nav.service.ts

import {EventEmitter} from 'angular2/core';
export class NavService {
  navchange: EventEmitter<number> = new EventEmitter();
  constructor() {}
  emitNavChangeEvent(number) {
    this.navchange.emit(number);
  }
  getNavChangeEmitter() {
    return this.navchange;
  }
}

components.ts

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number = 0;
  subscription: any;
  constructor(private navService:NavService) {}
  ngOnInit() {
    this.subscription = this.navService.getNavChangeEmitter()
      .subscribe(item => this.selectedNavItem(item));
  }
  selectedNavItem(item: number) {
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-nav',
  template:`
    <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
    <div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
  `,
})
export class Navigation {
  item = 1;
  constructor(private navService:NavService) {}
  selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navService.emitNavChangeEvent(item);
  }
}

Plunker

Comments

আমি এটি অনুসরণ করেছি, তবে এটি কেবল শ্রেণীর জন্যই কাজ করে। এটি অন্য শ্রেণীর জন্য কাজ করছে না (অন্য ফাইল থেকে)। দেখে মনে হচ্ছে সমস্যাটি পরিষেবা শ্রেণীর উদাহরণে রয়েছে। পরিষেবা ক্লাস স্থির হয়ে উঠতে পারে কি?

— asubanovsky

@ আসুবানোভস্কি, প্লামকারে আমি কেবল বুটস্ট্র্যাপ (অর্থাত্ মূল উপাদান) স্তরে নাভসওয়ার্স ইনজেকশন করি, সুতরাং সম্পূর্ণ অ্যাপ্লিকেশনের জন্য কেবলমাত্র পরিষেবার একটি উদাহরণ থাকতে হবে। আপনি এটি দিয়ে অন্য কোথাও ইনজেকশন দিচ্ছেন providers: [NavService]? যদি তা হয় তবে আপনি পরিষেবার একাধিক উদাহরণ পাবেন।

— রাজকক

আপনাকে অনেক ধন্যবাদ. এটি এখন আমার প্রত্যাশা হিসাবে কাজ করছে। এখন আমি বুটস্ট্র্যাপ স্তরে এবং উপাদান স্তরের সরবরাহকারীদের ইনজেকশনের মধ্যে পার্থক্য বুঝতে পারি।

— অসুবনভস্কি

এই পোস্টটি গুরুতরভাবে এমন একটি রাজ্যে পরিবর্তিত হয়েছিল যেখানে আমি আর 'এটি পাই না'। কেন পরিষেবাতে মেহটড কল করা হচ্ছে?

— পার হর্নশেজ-শিয়েরবেক

@ পেরহর্নশেজ-শিয়েরবেক, আমি ইভেন্ট ইনমিটারটি পরিষেবাটির অভ্যন্তরে ব্যবহৃত হচ্ছে এই বিষয়টি গোপন করতে আমি getNavChangeEmitter () পদ্ধতি ব্যবহার করেছি। পদ্ধতিটির ব্যবহারকারীরা ধরে নিতে পারেন যে প্রত্যাবর্তিত অবজেক্টটির একটি subscribe()পদ্ধতি রয়েছে। একটি পদ্ধতি ব্যবহার করে আমরা সহজেই ইভেন্টমিটারটিকে একটি সাবজেক্টে বা একটি পর্যবেক্ষণযোগ্যতে পরিবর্তন করতে পারি, এটি আরও ভাল, যেহেতু আমরা এখন শিখে এসেছি যে ইভেন্টইমিটারগুলি কেবল আউটপুট বৈশিষ্ট্যের জন্য ব্যবহার করা উচিত। সঠিক উপায় হ'ল সাবজেক্ট, বিহেভিয়ারসুবজেক্ট বা অবজারভেবল ব্যবহার করা এবং আমরা সাধারণত এগুলিতে সরাসরি সাবস্ক্রাইব করি, অতএব আমাদের আর getNavChangeEmitter () পদ্ধতির দরকার নেই।

— রাজকক

Answer 2

আলফা 28 ব্যবহার করে, আমি eventEmitter.toRx().subscribe(..)পদ্ধতিতে পদ্ধতিতে ইভেন্ট ইমিটারগুলিতে প্রোগ্রামক্রমে সাবস্ক্রাইব করতে পেরেছি । যেহেতু এটি স্বজ্ঞাত নয়, এটি সম্ভবত ভবিষ্যতের প্রকাশে পরিবর্তিত হতে পারে।

Comments

লোকেরা যদি এই পোস্টে হোঁচট খায় তবে তারা ব্যবহার করার জন্য সম্ভবত একটি সাধারণ উদাহরণ সরবরাহ করবে? এটি আমার বিটিডব্লিউটি ডাউনভিউটিং ছিল না;)

— পার হর্নশিজ-শিয়েরবেক

কেন এটি নিচে ভোট দেওয়া হয়েছে তা জানেন না, এটি অবশ্যই কাজ করে। সহজভাবে বলতে click.toRx().subscribe(your_callback_function)

— গেলে

আমি মনে করি এটি একটি নিম্নমানের হতে পারে কারণ এটির একটি কার্যকরী উদাহরণ নেই? আমি জানি এটি একটি উত্সাহব্যঞ্জক এবং সম্ভবত একটি গৃহীত উত্তরের উপযুক্ত হবে যদি এর সিনট্যাক্সটি আরও ভালভাবে প্রদর্শন করার জন্য যদি কোনও প্লঙ্কার / জেসফিডাল ফ্রিডল বা কোডের কিছু লাইন থাকে তবে;)

— পার হর্নশিজ-শিয়েরব্যাক

আমি ছাড় পাচ্ছি: রেফারেন্স এরিয়ার: ক্লিকটি সংজ্ঞায়িত করা হয়নি @ রুনবয় আপনি কি দয়া করে আপনার সমাধানের জন্য কোনও প্লেনক্রের সরবরাহ করতে পারেন?

— বেনজামিন ম্যাকফেরেন

এটির কাজ করার জন্য আপনাকে ক্লিক ইভেন্ট হিসাবে চিহ্নিত করতে হবে

— মাজন এলকেশেফ