কৌণিক / আরএক্সজে আমি কখন `সাবস্ক্রিপশন` থেকে সাবস্ক্রাইব করতে পারি`


718

আমি কখন এনজিওনডাস্ট্রয়ের জীবনচক্রের সময় Subscriptionদৃষ্টান্তগুলি সঞ্চয় করব এবং প্রার্থনা করব unsubscribe()এবং কখন আমি সেগুলি উপেক্ষা করতে পারি?

সমস্ত সাবস্ক্রিপশন সংরক্ষণ করা উপাদান উপাদানগুলিতে প্রচুর গণ্ডগোলের পরিচয় দেয়।

এইচটিটিপি ক্লায়েন্ট গাইড এর মতো সাবস্ক্রিপশন উপেক্ষা করুন:

getHeroes() {
  this.heroService.getHeroes()
                   .subscribe(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

একই সময়ে রুট এবং নেভিগেশন গাইড বলেছে যে:

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

আমরা থেকে আমাদের সদস্যতামুক্ত Observableমধ্যে ngOnDestroyপদ্ধতি।

private sub: any;

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     this.service.getHero(id).then(hero => this.hero = hero);
   });
}

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

20
আমার ধারণা , এড়ানো Subscriptionযায় http-requestsনা কারণ তারা কেবল onNextএকবার কল করে এবং তারপরে তারা কল করে onCompleteRouterপরিবর্তে আহ্বান onNextবারংবার এবং কল কখনো পারে onComplete(নিশ্চিত না যে সম্পর্কে ...)। একই Observableথেকে Eventগুলি এস থেকে যায় । সুতরাং আমার ধারণা এটি হওয়া উচিত unsubscribed
স্প্রিংবুবু

1
@ gt6707a এই সমাপ্তির কোনও পর্যবেক্ষণ থেকে স্ট্রিমটি সম্পূর্ণ (বা সম্পূর্ণ করে না) সম্পূর্ণ। সাবস্ক্রিপশন ফাংশনটিতে প্রদত্ত কলব্যাকগুলি (পর্যবেক্ষক) সংস্থান নির্ধারণ করে কিনা তা নির্ধারণ করে না। এটি subscribeনিজেরাই আহ্বান জানায় যে সম্ভাব্য সংস্থানগুলি উজানের দিকে চালিত করে।
sewwright

উত্তর:


979

--- সম্পাদনা 4 - অতিরিক্ত সংস্থানসমূহ (2018/09/01)

অ্যাঙ্গুলার ইন অ্যাডভেঞ্চারস এর সাম্প্রতিক পর্বে অ্যাঙ্কুলার বেন লেশ এবং ওয়ার্ড বেল কোনও / কোনও উপাদানকে কীভাবে / কখন সাবস্ক্রাইব করবেন তা প্রায় বিষয়গুলি নিয়ে আলোচনা করুন। আলোচনাটি প্রায় 1:05:30 এ শুরু হয়।

ওয়ার্ড উল্লেখ right now there's an awful takeUntil dance that takes a lot of machineryএবং শাই রেজনিক উল্লেখ Angular handles some of the subscriptions like http and routing

প্রতিক্রিয়া হিসাবে বেন উল্লেখ করেছেন যে এখনই অবজারভেলসকে কৌণিক উপাদান লাইফসাইकल ইভেন্টগুলিতে প্রবেশ করার অনুমতি দেওয়ার জন্য আলোচনা করা হয়েছে এবং ওয়ার্ড প্রস্তাবিত জীবনচক্রের একটি পর্যবেক্ষণযোগ্য পরামর্শ দেয় যে কোনও উপাদান উপাদান অভ্যন্তরীণ রাষ্ট্র হিসাবে রক্ষণাবেক্ষণের জন্য কখন সম্পূর্ণ করতে পারে তা জানার উপায় হিসাবে সাবস্ক্রাইব করতে পারে।

এটি বলেছিল, আমাদের এখন বেশিরভাগ সমাধান প্রয়োজন তাই এখানে অন্যান্য কিছু সংস্থান রয়েছে।

  1. takeUntil()আরএক্সজেএসের মূল দলের সদস্য নিকোলাস জ্যামিসন থেকে প্যাটার্নের জন্য একটি সুপারিশ এবং এটি প্রয়োগে সহায়তা করার জন্য একটি tslint নিয়ম। https://ncjamieson.com/avoiding-takeuntil-leaks/

  2. লাইটওয়েট এনপিএম প্যাকেজ যা পর্যবেক্ষণযোগ্য অপারেটরটিকে বহন করে যা thisপরামিতি হিসাবে কোনও উপাদান উদাহরণ ( ) গ্রহণ করে এবং স্বয়ংক্রিয়ভাবে সাবস্ক্রাইব করার সময় ngOnDestroyhttps://github.com/NetanelBasal/ngx-take-until-destroy

  3. আপনি যদি এওটি বিল্ড না করে থাকেন তবে কিছুটা ভাল এরগনমিকসের সাথে উপরের আরও একটি প্রকরণ (তবে আমাদের সবার এখনই এওটি করা উচিত)। https://github.com/smnbbrv/ngx-rx-collector

  4. কাস্টম দিকনির্দেশনা *ngSubscribeযা অ্যাসিঙ্ক পাইপের মতো কাজ করে তবে আপনার টেমপ্লেটে এম্বেডড ভিউ তৈরি করে যাতে আপনি আপনার টেমপ্লেট জুড়ে 'মোড়ানো' মানটি উল্লেখ করতে পারেন। https://netbasal.com/diy-subscription-handling-directive-in-angular-c8f6e762697f

আমি নিকোলাসের ব্লগে একটি মন্তব্যে উল্লেখ করেছি যে অতিরিক্ত ব্যবহারের ফলে takeUntil()আপনার উপাদানটি খুব বেশি চেষ্টা করার চেষ্টা করছে এবং আপনার বিদ্যমান উপাদানগুলিকে বৈশিষ্ট্য এবং উপস্থাপক উপাদানগুলিতে পৃথক করার বিষয়টি বিবেচনা করা উচিত sign তারপরে আপনি | asyncবৈশিষ্ট্য উপাদানটি থেকে Inputউপস্থাপক উপাদানগুলির একটিতে পর্যবেক্ষণযোগ্য করতে পারবেন , যার অর্থ কোথাও কোনও সদস্যতার প্রয়োজন নেই necessary এখানে এই পদ্ধতির সম্পর্কে আরও পড়ুন

--- সম্পাদনা 3 - 'অফিসিয়াল' সমাধান (2017/04/09)

আমি এনজিওনফ এ ওয়ার্ড বেলের সাথে এই প্রশ্নটি সম্পর্কে কথা বলেছি (এমনকি আমি তাকে এই উত্তরটিও দেখিয়েছিলাম যা তিনি সঠিক বলেছিলেন) তবে তিনি আমাকে বলেছিলেন যে অ্যাঙ্গুলারের জন্য ডক্স দলটির এই প্রশ্নের একটি সমাধান রয়েছে যা অপ্রকাশিত (যদিও তারা এটি অনুমোদনে কাজ করছে) )। তিনি আমাকে আরও বলেছিলেন যে আমি আসন্ন আধিকারিকের সুপারিশ সহ আমার এসও উত্তর আপডেট করতে পারি।

সমাধান আমরা সবাই ব্যবহার এগিয়ে নিয়ে যাওয়া উচিত যোগ হয় private ngUnsubscribe = new Subject();সব উপাদান আছে যে ক্ষেত্র .subscribe()কল Observableতাদের শ্রেণীর সংকেত মধ্যে গুলি।

তারপরে আমরা this.ngUnsubscribe.next(); this.ngUnsubscribe.complete();আমাদের ngOnDestroy()পদ্ধতিগুলিতে কল করি ।

সিক্রেট সস (যেমন ইতিমধ্যে @metamaker দ্বারা উল্লিখিত ) takeUntil(this.ngUnsubscribe)আমাদের .subscribe()কলগুলির আগে কল করা যা যা উপাদানটি ধ্বংস হয়ে গেলে সমস্ত সাবস্ক্রিপশন পরিষ্কার হয়ে যাওয়ার নিশ্চয়তা দেয় will

উদাহরণ:

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
    selector: 'app-books',
    templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
    private ngUnsubscribe = new Subject();

    constructor(private booksService: BookService) { }

    ngOnInit() {
        this.booksService.getBooks()
            .pipe(
               startWith([]),
               filter(books => books.length > 0),
               takeUntil(this.ngUnsubscribe)
            )
            .subscribe(books => console.log(books));

        this.booksService.getArchivedBooks()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(archivedBooks => console.log(archivedBooks));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

দ্রষ্টব্য:takeUntil অপারেটর চেইনে অন্তর্বর্তী পর্যবেক্ষণযোগ্যদের সাথে ফাঁস রোধ করতে সর্বশেষ হিসাবে অপারেটরটি যুক্ত করা গুরুত্বপূর্ণ ।

--- সম্পাদনা 2 (2016/12/28)

সূত্র 5

কৌণিক টিউটোরিয়াল, রাউটিং অধ্যায়টি এখন নিম্নলিখিতটি জানিয়েছে: "রাউটারটি সাবস্ক্রিপশনগুলি সরবরাহ করে এবং স্থানীয়করণ করে এমন পর্যবেক্ষণগুলি পরিচালনা করে the উপাদানটি ধ্বংস হয়ে গেলে, সাবস্ক্রিপশনগুলি পরিষ্কার হয়ে যায়, মেমরি ফাঁস থেকে রক্ষা করে, সুতরাং আমাদের থেকে সাবস্ক্রাইব করার দরকার নেই from রুট পর্যবেক্ষণযোগ্য প্যারাম। " - মার্ক রাজকক

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

--- সম্পাদনা করুন 1

সূত্র 4

এনজিওরোপ রব ওয়ার্মল্ডের এই ভিডিওতে এও বলেছেন যে রাউটার অবজারভেজেবল থেকে আপনাকে সদস্যতা ছাড়ার দরকার নেই। তিনি httpপরিষেবাটি এবং ActivatedRoute.paramsএই ভিডিওতে নভেম্বর 2016 থেকে উল্লেখ করেছেন ।

--- আসল উত্তর

TLDR:

এই প্রশ্নের জন্য (2) ধরণের রয়েছে Observables- সীমাবদ্ধ মান এবং অসীম মান।

http Observablesসীমাবদ্ধ (1) মান এবং একটি ডোমের মতো কিছু উত্পাদন করেevent listener Observables উত্পাদন অসীম মান।

আপনি যদি ম্যানুয়ালি কল করেন subscribe(async পাইপ ব্যবহার করছেন না), তবেunsubscribe অনন্ত থেকে Observables

চিন্তা করবেন না সসীম , RxJsতাদের যত্ন নেবেন।

সূত্র ঘ

আমি অ্যাংুলার গিটারে রব ওয়ার্মল্ডের একটি উত্তর সন্ধান করেছি এখানে

তিনি বলেছেন (আমি স্বচ্ছতার জন্য পুনর্গঠিত এবং জোর আমার)

যদি এটির একটি একক-মান-সিকোয়েন্স (কোনও HTTP অনুরোধের মতো) হয় ম্যানুয়াল ক্লিনআপ অপ্রয়োজনীয় (ধরে নিলে আপনি নিজেই নিয়ামকটিতে সাবস্ক্রাইব করে ধরেছেন)

আমার বলা উচিত "যদি এটি একটি ক্রম সম্পূর্ণ করে " (যার মধ্যে একক মান সিক্যোয়েন্সগুলি, একটি লা HT, একটি)

যদি তার অসীম অনুক্রম , আপনি সদস্যতামুক্ত উচিত যা ASYNC নল তোমার জন্য না

এছাড়াও তিনি এই ইউটিউব ভিডিওতে পর্যবেক্ষণে উল্লেখ করেছেন যে they clean up after themselves... পর্যবেক্ষণের প্রসঙ্গে যে complete(প্রতিশ্রুতিগুলির মতো, যা সর্বদা পূর্ণ হয় কারণ তারা সর্বদা 1 মান উত্পাদন করে এবং শেষ হয় - আমরা কখনই xhrইভেন্টটি সাফ না করে তা নিশ্চিত করার প্রতিশ্রুতি থেকে সদস্যতা নিয়ে উদ্বিগ্ন হইনি) শ্রোতা, ঠিক আছে?)।

উত্স 2

এছাড়াও কৌনিক 2 এর রঙিন গাইডে এটি পড়ে

বেশিরভাগ ক্ষেত্রে আমাদের স্পষ্টতই সাবস্ক্রাইব পদ্ধতিটি কল করার দরকার নেই যতক্ষণ না আমরা তাড়াতাড়ি বাতিল করতে চাই বা আমাদের পর্যবেক্ষণযোগ্যটির সাবস্ক্রিপশনের চেয়ে দীর্ঘতর জীবনকাল না থাকে। পর্যবেক্ষণযোগ্য অপারেটরগুলির ডিফল্ট আচরণ হ'ল। কমপ্লিট () বা .error () বার্তা প্রকাশিত হওয়ার সাথে সাথেই সাবস্ক্রিপশনটি নিষ্পত্তি করা। মনে রাখবেন যে আরএক্সজেএস বেশিরভাগ সময় "ফায়ার এন্ড ভুলে" ফ্যাশনে ব্যবহারের জন্য ডিজাইন করা হয়েছিল।

কথাটি কখন our Observable has a longer lifespan than our subscriptionপ্রয়োগ হয়?

এটি প্রয়োগ হয় যখন কোনও সাবস্ক্রিপশন কোনও উপাদানটির ভিতরে তৈরি করা হয় যা সম্পূর্ণ হওয়ার আগে (বা 'দীর্ঘ' না আগে) ধ্বংস হয়ে যায় Observable

আমি এটি অর্থ হিসাবে পড়ি যদি আমরা একটি httpঅনুরোধ বা সাবস্ক্রাইব করে সাবস্ক্রাইব করি যা 10 টি মান নির্গত করে এবং আমাদের httpঅনুরোধটি অনুরোধটি ফেরার আগেই ধ্বংস হয়ে যায় বা 10 মান নির্গত হয়, আমরা এখনও ঠিক আছি!

যখন অনুরোধটি ফিরে আসে বা 10 তম মান অবশেষে নির্গত হয় তখন Observableসম্পূর্ণ হয়ে যায় এবং সমস্ত সংস্থান পরিষ্কার হয়ে যায়।

উত্স 3

আমরা যদি তাকান এই উদাহরণে একই rangle থেকে গাইড আমরা দেখতে পারি যে Subscriptionকরতে route.paramsএকটি প্রয়োজন নেই unsubscribe()কারণ আমরা জানি না যখন সেই paramsপরিবর্তন (নতুন মান emitting) বন্ধ করে দেব।

অংশটি নেভিগেট করে ধ্বংস করা যেতে পারে যেখানে রুট প্যারামগুলি সম্ভবত এখনও পরিবর্তিত হবে (অ্যাপটি শেষ না হওয়া পর্যন্ত তারা প্রযুক্তিগতভাবে পরিবর্তিত হতে পারে) এবং সাবস্ক্রিপশনে বরাদ্দকৃত সংস্থানগুলি এখনও বরাদ্দ করা হবে কারণ একটি হয়নি completion


15
complete()নিজে থেকে কল করা সাবস্ক্রিপশনগুলি পরিষ্কার করার জন্য উপস্থিত হয় না। তবে কল করা next()এবং তারপরেও complete(), আমি বিশ্বাস করি যে takeUntil()কেবলমাত্র কোনও মান উৎপন্ন হলেই থামবে, যখন ক্রমটি শেষ হবে না।
ফায়ারফ্লাই

2
@ সেয়াং রাইট Subjectএকটি উপাদানটির ভিতরে টাইপ করা কোনও সদস্যের সাথে একটি দ্রুত পরীক্ষা এবং এটি ngIfট্রিগারে দেখানোর জন্য টগল করে ngOnInitএবং ngOnDestroyদেখায় যে বিষয় এবং এর সাবস্ক্রিপশনগুলি কখনই সম্পূর্ণ হবে না বা নিষ্পত্তি হবে না ( finallyসাবস্ক্রিপশনে একজন- সংযোজককে জড়িত করে)। আমাকে অবশ্যই কল Subject.complete()করতে হবে ngOnDestroy, যাতে সাবস্ক্রিপশনগুলি নিজেরাই পরিষ্কার করতে পারে।
লার্স

3
আপনার --- সম্পাদনা 3 খুব অন্তর্দৃষ্টিযুক্ত, ধন্যবাদ! আমার কেবল একটি ফলোআপ প্রশ্ন রয়েছে: যদি এই takeUnitlপদ্ধতির ব্যবহার করা হয় তবে আমাদের কখনই কোনও পর্যবেক্ষণে ম্যানুয়ালি সদস্যতা ছাড়তে হবে না? এটাই কি? তদ্ব্যতীত, কেন আমাদের কল next()করতে হবে ngOnDestroy, কেন কেবল কল করা হবে না complete()?
uglycode

6
@ সেয়াং রাইট এটি হতাশ; অতিরিক্ত বয়লারপ্লেট বিরক্তিকর।
স্পঞ্জসাক

3
সম্পাদনা করুন 3 এ ঘটনা প্রসঙ্গে আলোচনা medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87
HankCa

89

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

import { Subject } from "rxjs"
import { takeUntil } from "rxjs/operators"

@Component({
  moduleId: __moduleName,
  selector: "my-view",
  templateUrl: "../views/view-route.view.html"
})
export class ViewRouteComponent implements OnInit, OnDestroy {
  componentDestroyed$: Subject<boolean> = new Subject()

  constructor(private titleService: TitleService) {}

  ngOnInit() {
    this.titleService.emitter1$
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe((data: any) => { /* ... do something 1 */ })

    this.titleService.emitter2$
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe((data: any) => { /* ... do something 2 */ })

    //...

    this.titleService.emitterN$
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe((data: any) => { /* ... do something N */ })
  }

  ngOnDestroy() {
    this.componentDestroyed$.next(true)
    this.componentDestroyed$.complete()
  }
}

বিকল্প পদ্ধতিতে , যা প্রস্তাবিত হয় মন্তব্য @acumartini দ্বারা , ব্যবহার takeWhile পরিবর্তে takeUntil । আপনি এটি পছন্দ করতে পারেন, তবে মনে রাখবেন যে আপনার অবজেক্টেবল এক্সিকিউশনটি আপনার উপাদানটির এনজিডস্ট্রয়তে বাতিল হবে না (যেমন আপনি যখন সময় সাশ্রয়ী গণনা করেন বা সার্ভার থেকে ডেটার জন্য অপেক্ষা করেন)। পদ্ধতি, যা টেকইন্টিল ভিত্তিক , এর এই অপূর্ণতা নেই এবং তাত্ক্ষণিকভাবে অনুরোধ বাতিল করার দিকে পরিচালিত করে। মন্তব্যে বিস্তারিত ব্যাখ্যার জন্য @ অ্যালেক্সকে ধন্যবাদ জানাই

সুতরাং এখানে কোড:

@Component({
  moduleId: __moduleName,
  selector: "my-view",
  templateUrl: "../views/view-route.view.html"
})
export class ViewRouteComponent implements OnInit, OnDestroy {
  alive: boolean = true

  constructor(private titleService: TitleService) {}

  ngOnInit() {
    this.titleService.emitter1$
      .pipe(takeWhile(() => this.alive))
      .subscribe((data: any) => { /* ... do something 1 */ })

    this.titleService.emitter2$
      .pipe(takeWhile(() => this.alive))
      .subscribe((data: any) => { /* ... do something 2 */ })

    // ...

    this.titleService.emitterN$
      .pipe(takeWhile(() => this.alive))
      .subscribe((data: any) => { /* ... do something N */ })
  }

  // Probably, this.alive = false MAY not be required here, because
  // if this.alive === undefined, takeWhile will stop. I
  // will check it as soon, as I have time.
  ngOnDestroy() {
    this.alive = false
  }
}

1
যদি তিনি কেবল রাষ্ট্রকে ধরে রাখতে একটি বুল ব্যবহার করেন, তবে "টেকইন্টিল" কীভাবে প্রত্যাশা অনুযায়ী কাজ করবেন?
Val,

5
আমি মনে করি ব্যবহার takeUntilএবং এর মধ্যে একটি উল্লেখযোগ্য পার্থক্য রয়েছে takeWhile। উত্সাহিত হওয়ার সাথে সাথে উত্স থেকে প্রাক্তন সদস্যতাগুলি অবিলম্বে পর্যবেক্ষণযোগ্য হয়ে যায়, যদিও পরবর্তীটি উত্স পর্যবেক্ষণযোগ্য দ্বারা উত্পাদিত হওয়ার সাথে সাথেই পরবর্তী সদস্যতা বাতিল করে। উত্স পর্যবেক্ষণযোগ্য দ্বারা কোনও মান উত্পাদন করা যদি একটি সংস্থান গ্রহণকারী ক্রিয়াকলাপ হয় তবে দুজনের মধ্যে চয়ন করা স্টাইলের পছন্দকে ছাড়িয়ে যেতে পারে। প্লাঙ্কটি
অ্যালেক্স চে

1
@ অ্যালেক্সচে আকর্ষণীয় প্লাঙ্ক দেওয়ার জন্য ধন্যবাদ! এটি takeUntilবনামের সাধারণ ব্যবহারের জন্য খুব কার্যকর পয়েন্ট takeWhile, তবে আমাদের নির্দিষ্ট ক্ষেত্রে নয়। আমরা যখন আনসাবস্ক্রাইব শ্রোতাকে প্রয়োজন উপাদান ধ্বংস উপর , আমরা শুধু মত বুলিয়ান মান যাচাই করছি () => aliveমধ্যে takeWhile, তাই যে কোনো সময় / গ্রাসকারী অপারেশন মেমরির ব্যবহার করা হয় না এবং পার্থক্য styling (Ofc, এই নির্দিষ্ট ক্ষেত্রে জন্য) সম্পর্কে প্রায় কাছাকাছি হয়।
মেটাকমেকার

1
@ মেটামেকার বলুন, আমাদের উপাদানটিতে আমরা একটিতে সাবস্ক্রাইব করে থাকি Observable, যা অভ্যন্তরীণভাবে কিছু ক্রিপ্টো-মুদ্রা nextখনন করে এবং প্রতি খননকৃত মুদ্রার জন্য একটি ইভেন্ট চালায় এবং এই জাতীয় একটি মুদ্রা খনন করতে একদিন সময় লাগে। সঙ্গে takeUntilআমরা উৎস খনির কাছ থেকে সদস্যতামুক্ত হবে Observableঅবিলম্বে একবার ngOnDestroyআমাদের উপাদান ধ্বংস করার সময় বলা হয়। সুতরাং খনির Observableকাজটি এই প্রক্রিয়া চলাকালীন তত্ক্ষণাত্ এর কার্যক্রম বাতিল করতে সক্ষম হয় able
অ্যালেক্স চে

1
OTOH, যদি আমরা ব্যবহার করি takeWhileতবে ngOnDestoryআমরা কেবল বুলিয়ান ভেরিয়েবলটি সেট করি। তবে খনির Observableকাজটি এখনও একদিন অবধি কার্যকর হতে পারে এবং কেবলমাত্র তার nextকল করার সময়ই বুঝতে পারবে যে কোনও সাবস্ক্রিপশন সক্রিয় নেই এবং এটি বাতিল করতে হবে।
অ্যালেক্স চে

75

সাবস্ক্রিপশন শ্রেণীর একটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে:

একটি ডিসপোজেবল সংস্থান যেমন একটি পর্যবেক্ষণযোগ্য সম্পাদন হিসাবে প্রতিনিধিত্ব করে। সাবস্ক্রিপশনের একটি গুরুত্বপূর্ণ পদ্ধতি রয়েছে, সাবস্ক্রাইব করুন, এটি কোনও যুক্তি গ্রহণ করে না এবং কেবল সাবস্ক্রিপশনের দ্বারা রাখা রিসোর্সটিকে নিষ্পত্তি করে।
অতিরিক্তভাবে, অ্যাড () পদ্ধতির মাধ্যমে সাবস্ক্রিপশনগুলি একত্রে গোষ্ঠীভুক্ত করা যেতে পারে যা বর্তমান সাবস্ক্রিপশনে একটি শিশু সাবস্ক্রিপশন সংযুক্ত করবে। যখন সাবস্ক্রিপশনটি সাবস্ক্রাইব করা হয়, তখন তার সমস্ত শিশু (এবং তার নাতি-নাতনী )ও সাবস্ক্রাইব করা হবে।

আপনি একটি সামগ্রিক সাবস্ক্রিপশন অবজেক্ট তৈরি করতে পারেন যা আপনার সমস্ত সদস্যতাগুলিকে গোষ্ঠী করে। আপনি খালি সাবস্ক্রিপশন তৈরি করে এবং এর add()পদ্ধতিটি ব্যবহার করে এতে সাবস্ক্রিপশন যুক্ত করে এটি করেন । যখন আপনার উপাদানটি ধ্বংস হয়ে যায়, আপনার কেবলমাত্র সামগ্রিক সাবস্ক্রিপশনটি বাতিল করতে হবে।

@Component({ ... })
export class SmartComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();

  constructor(private heroService: HeroService) {
  }

  ngOnInit() {
    this.subscriptions.add(this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes));
    this.subscriptions.add(/* another subscription */);
    this.subscriptions.add(/* and another subscription */);
    this.subscriptions.add(/* and so on */);
  }

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

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

আমি কোন সচেতনতা অবগত নই। আমি মনে করি না এটি আরও ভাল, অন্যরকম।
স্টিভেন লাইকেনস

2
সাবস্ক্রিপশন সংগ্রহ ও কল করার এই পদ্ধতির বিপরীতে অফিশিয়াল পদ্ধতির উপর আরও আলোচনার জন্য মিডিয়াম.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87 দেখুন । (এই পদ্ধতির বিষয়টি আমার কাছে অনেক বেশি পরিস্কার মনে হয়))takeUntilunsubscribe
জোশ কেলি

3
এই উত্তরের একটি ছোট সুবিধা: আপনাকে this.subscriptionsনাল কিনা তা পরীক্ষা করতে হবে না
ব্যবহারকারী 2023861

1
কেবল অ্যাড পদ্ধতির শৃঙ্খলা এড়িয়ে চলুন sub = subsciption.add(..).add(..)কারণ অনেক ক্ষেত্রে এটি অপ্রত্যাশিত ফলাফল তৈরি করে github.com/ReactiveX/rxjs/issues/2769#issuecomment-345636477
জেনারেলভ

32

কৌণিক উপাদানগুলির মধ্যে পর্যবেক্ষণযোগ্য সদস্যতা বাতিল করার বিষয়ে কয়েকটি সেরা অনুশীলন:

থেকে একটি উদ্ধৃতি Routing & Navigation

কোনও উপাদানটিতে পর্যবেক্ষণযোগ্যতে সাবস্ক্রাইব করার সময়, উপাদানটি নষ্ট হয়ে গেলে আপনি প্রায় সর্বদা সাবস্ক্রাইব করার ব্যবস্থা করেন।

কয়েকটি ব্যতিক্রমী পর্যবেক্ষণযোগ্য রয়েছে যেখানে এটি প্রয়োজনীয় নয়। অ্যাক্টিভেটেডরউট পর্যবেক্ষণগুলি ব্যতিক্রমগুলির মধ্যে অন্যতম।

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

যেকোনো উপায়ে সদস্যতা মুক্ত মনে করুন। এটি নিরীহ এবং কখনও খারাপ অভ্যাস নয়।

এবং নিম্নলিখিত লিঙ্কগুলিতে প্রতিক্রিয়া জানাতে:

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

  • httpপর্যবেক্ষণযোগ্য আনসাবস্ক্রিপশন শর্তসাপেক্ষ এবং কেস ভিত্তিতে একটি কেসে উপাদানটি নষ্ট হয়ে যাওয়ার পরে চলমান 'সাবস্ক্রাইব কলব্যাক' এর প্রভাবগুলি আমাদের বিবেচনা করা উচিত। আমরা জানি যে কৌনিক সদস্যতা বাতিল করে এবং httpপর্যবেক্ষণযোগ্য নিজেই পরিষ্কার করে (1) , (2) । যদিও এটি সম্পদের দৃষ্টিকোণ থেকে সত্য তবে এটি কেবল অর্ধেক গল্পই বলে। ধরা যাক আমরা কোনও উপাদানগুলির মধ্যে থেকে সরাসরি কল করার বিষয়ে কথা বলছি , এবং প্রতিক্রিয়াটি প্রয়োজনের চেয়ে বেশি সময় নিয়েছে তাই ব্যবহারকারী উপাদানটি বন্ধ করে দিয়েছে। দ্য হ্যান্ডলারটি উপাদানটি বন্ধ করে এবং ধ্বংস করা হলেও এখনও ডাকা হবে। এটির অবাঞ্ছিত পার্শ্ব প্রতিক্রিয়া থাকতে পারে এবং আরও খারাপ পরিস্থিতিতে অ্যাপ্লিকেশনের অবস্থা ভেঙে যায়। কলব্যাকের কোডটি সবেমাত্র নিষ্পত্তি করা হয়েছে এমন কিছু কল করার চেষ্টা করলেও এটি ব্যতিক্রম ঘটতে পারে। তবে একই সাথে মাঝেমধ্যে তারা পছন্দসই হয়। যেমন, আসুন আমরা বলি যে আপনি একটি ইমেল ক্লায়েন্ট তৈরি করছেন এবং ইমেল প্রেরণের সময় আপনি একটি শব্দটি ট্রিগার করেন - ভাল আপনি এখনও চাইবেন যে উপাদানটি বন্ধ থাকলেও ঘটবে (httphttpsubscribe() 8 )।
  • সম্পূর্ণ বা ত্রুটিযুক্ত পর্যবেক্ষণযোগ্যদের থেকে সদস্যতা ছাড়ার প্রয়োজন নেই। তবে এটি করার কোনও ক্ষতি নেই (7)
  • AsyncPipeযতটা সম্ভব ব্যবহার করুন কারণ এটি উপাদান ধ্বংসের উপর পর্যবেক্ষণযোগ্য থেকে স্বয়ংক্রিয়ভাবে সাবস্ক্রাইব করে।
  • ActivatedRouteপর্যবেক্ষণযোগ্যদের কাছ থেকে route.paramsসাবস্ক্রাইব করুন যেমন তারা নেস্টেড (উপাদান নির্বাচনকারীর সাথে tpl এর অভ্যন্তরে যোগ করা হয়েছে) বা গতিশীল উপাদান হিসাবে প্যারেন্ট / হোস্ট উপাদান উপস্থিত থাকা অবধি বহুবার সাবস্ক্রাইব হতে পারে। Routing & Navigationডকস থেকে উপরের উদ্ধৃতিতে উল্লিখিত অন্যান্য পরিস্থিতিতে তাদের থেকে সদস্যতা ছাড়ার প্রয়োজন নেই ।
  • একটি কৌণিক পরিষেবা মাধ্যমে প্রকাশ করা হয় যে উপাদানগুলির মধ্যে ভাগ করা বৈশ্বিক পর্যবেক্ষণগুলি থেকে সাবস্ক্রাইব করুন উদাহরণস্বরূপ যেগুলি উপাদানটি আরম্ভ হওয়ার সাথে সাথে একাধিকবার সাবস্ক্রাইব হতে পারে।
  • কোনও অ্যাপ্লিকেশন স্কোপড পরিষেবাটির অভ্যন্তরীণ পর্যবেক্ষণগুলি থেকে সদস্যতা নেওয়ার দরকার নেই কারণ এই পরিষেবাটি কখনই ধ্বংস হয় না, যতক্ষণ না আপনার সম্পূর্ণ অ্যাপ্লিকেশনটি ধ্বংস হয়ে যায়, এটি থেকে সদস্যতা নেওয়ার কোনও আসল কারণ নেই এবং মেমরি ফাঁস হওয়ার কোনও সম্ভাবনা নেই। (6)

    বিঃদ্রঃ: স্কোপড পরিষেবাদি, অর্থাৎ উপাদান সরবরাহকারীদের বিষয়ে, উপাদানটি নষ্ট হয়ে গেলে তারা ধ্বংস হয়। এই ক্ষেত্রে, আমরা যদি এই সরবরাহকারীর মধ্যে কোনও পর্যবেক্ষণযোগ্য সাবস্ক্রাইব করি তবে আমাদের এটি ব্যবহার করে এটি থেকে সদস্যতা ছাড়াই বিবেচনা করা উচিতOnDestroy ডকস অনুসারে পরিষেবাটি নষ্ট হয়ে লাইফসাইকেল হুক ।
  • আনসস্ক্রিপশনের ফলে তৈরি হওয়া কোনও কোড জগাখিচুড়ি এড়ানোর জন্য একটি বিমূর্ত কৌশলটি ব্যবহার করুন। আপনি takeUntil (3) এর সাথে আপনার সাবস্ক্রিপশন পরিচালনা করতে পারেন বা আপনি উল্লিখিত এই npm প্যাকেজটি ব্যবহার করতে পারেন (4) কৌণিকের মধ্যে পর্যবেক্ষণগুলি থেকে সদস্যতা নেওয়ার সবচেয়ে সহজ উপায়
  • সবসময় পছন্দসই ও FormGroupপছন্দ মতো পর্যবেক্ষক থেকে সাবস্ক্রাইব করুনform.valueChangesform.statusChanges
  • সর্বদা Renderer2পরিষেবার মতো পর্যবেক্ষণগুলি থেকে সাবস্ক্রাইব করুনrenderer2.listen
  • কৌণিক দস্তাবেজগুলি পরিষ্কারভাবে আমাদের না জানায় যে কোন পর্যবেক্ষণযোগ্য সদস্যতা বাতিল করা অপ্রয়োজনীয় (অবধি পরীক্ষা করুন: (5) আরএক্সজেএস সদস্যতা রদ করার জন্য ডকুমেন্টেশন (ওপেন) )
  • বোনাস: ইভেন্টগুলি আবদ্ধ করার জন্য সর্বদা কৌণিক উপায়গুলি ব্যবহার করুন HostListenerযেমন কৌণিক প্রয়োজনে ইভেন্ট শ্রোতাদের অপসারণ সম্পর্কে ভাল যত্ন করে এবং ইভেন্টের বাইন্ডিংয়ের কারণে কোনও সম্ভাব্য মেমরি ফাঁস প্রতিরোধ করে।

একটি দুর্দান্ত চূড়ান্ত টিপ : যদি আপনি না জানেন যে কোনও পর্যবেক্ষণযোগ্য স্বয়ংক্রিয়ভাবে সাবস্ক্রাইব / সাবস্ক্রাইব হচ্ছে কিনা বা না হয় তবে একটি completeকলব্যাক যোগ করুন subscribe(...)এবং উপাদানটি নষ্ট হয়ে গেলে এটি ডাকা হয়েছে কিনা তা পরীক্ষা করুন।


No. নম্বরের উত্তর একেবারেই সঠিক নয়। পরিষেবাগুলি ধ্বংস হয়ে যায় এবং তাদের ngOnDestroyডাকা হয় যখন পরিষেবাটি মূল স্তরের ব্যতীত অন্য স্তরে সরবরাহ করা হয় যেমন কোনও উপাদানে স্পষ্টভাবে সরবরাহ করা হয় যা পরে মুছে ফেলা হয়। এই ক্ষেত্রে আপনার পরিষেবাগুলি অভ্যন্তরীণ পর্যবেক্ষণগুলি থেকে সাবস্ক্রাইব করা উচিত
Drenai

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

যদি পরিষেবাটি ধ্বংস হচ্ছে তবে ডিআই হায়ারার্কিতে উচ্চতর অন্য কোনও পরিষেবার সাথে সম্পর্কিত একটি পর্যবেক্ষণযোগ্য সদস্যতার সাবস্ক্রিপশন রয়েছে, তবে জিসি ঘটবে না। সদস্যতা রদ করা দ্বারা এই দৃশ্যকল্প এড়িয়ে চলুন ngOnDestroy, যা সবসময় বলা হয় যখন পরিষেবার ধ্বংস করে দেওয়া হয় github.com/angular/angular/commit/...
Drenai

1
@ ড্রেনাই, আপডেট হওয়া উত্তরটি দেখুন।
মৌনির

2
@ টিম সবার আগে Feel free to unsubscribe anyway. It is harmless and never a bad practice.এবং আপনার প্রশ্ন সম্পর্কিত, এটি নির্ভর করে। যদি সন্তানের উপাদানটি একাধিকবার শুরু করা হয় (উদাহরণস্বরূপ, অভ্যন্তরীণভাবে যুক্ত ngIfহওয়া বা গতিশীলভাবে লোড হওয়া), একই পর্যবেক্ষকের একাধিক সাবস্ক্রিপশন যোগ করা এড়াতে আপনাকে অবশ্যই সাবস্ক্রাইব করতে হবে। নাহলে দরকার নেই। তবে আমি সন্তানের উপাদানগুলির ভিতরে সদস্যতা বাছাই পছন্দ করি কারণ এটি এটিকে আরও পুনরায় ব্যবহারযোগ্য এবং এটি কীভাবে ব্যবহার করা যায় তা থেকে বিচ্ছিন্ন করে তোলে।
মৌনির

18

এটা নির্ভর করে. যদি কল করে someObservable.subscribe()আপনি এমন কিছু সংস্থান ধরে রাখতে শুরু করেন যা আপনার উপাদানটির জীবনকাল শেষ হয়ে গেলে ম্যানুয়ালি মুক্ত হতে হবে, তারপরে আপনার কল করা উচিতtheSubscription.unsubscribe() মেমরি ফাঁস রোধে করা ।

আসুন আপনার উদাহরণগুলি ঘনিষ্ঠভাবে দেখুন:

getHero()এর ফলাফল প্রদান করে http.get()। আপনি কৌণিক 2 দেখব তাহলে সোর্স কোড , http.get()দুই ঘটনা শ্রোতাকে তৈরি করে:

_xhr.addEventListener('load', onLoad);
_xhr.addEventListener('error', onError);

এবং কল করে unsubscribe()আপনি শ্রোতার পাশাপাশি অনুরোধটি বাতিল করতে পারেন:

_xhr.removeEventListener('load', onLoad);
_xhr.removeEventListener('error', onError);
_xhr.abort();

নোট যে _xhrপ্ল্যাটফর্ম নির্দিষ্ট, তবে আমি মনে করি এটি নিরাপদ যে এটি নিরাপদXMLHttpRequest() আপনার ক্ষেত্রে ।

সাধারণত, এটি ম্যানুয়াল unsubscribe()কলকে পরোয়ানা দেওয়ার পক্ষে যথেষ্ট প্রমাণ । কিন্তু এই অনুযায়ী WHATWG বৈশিষ্ট , XMLHttpRequest()গার্বেজ কালেকশন সাপেক্ষে একবার এটি "সম্পন্ন হয়েছে" হয়, এমনকি যদি ঘটনা থেকে সংযুক্ত শ্রোতাকে হয়। সুতরাং আমি অনুমান করি যে কেন কৌণিক 2 অফিসিয়াল গাইড বাদ দেয়unsubscribe() এবং জিসি শ্রোতাদের পরিষ্কার করতে দেয়।

আপনার দ্বিতীয় উদাহরণ হিসাবে, এটি বাস্তবায়নের উপর নির্ভর করে params। আজকের হিসাবে, কৌনিক অফিসিয়াল গাইড আর থেকে সদস্যতা ছাড়াই দেখায় না params। আমি আবার এসআরসি-তে সন্ধান করলাম এবং দেখতে পেলাম যে paramsএটি একটি বিহাইয়ারসুবজেক্ট । যেহেতু কোন ঘটনা শ্রোতাকে বা টাইমার ব্যবহার করা হয়েছে, এবং কোন গ্লোবাল ভেরিয়েবল তৈরি করা হয়েছিল, এটা বর্জন করা নিরাপদ হওয়া উচিত unsubscribe()

আপনার প্রশ্নের মূল লাইনটি হ'ল সর্বদা unsubscribe()মেমরি ফাঁসের বিরুদ্ধে প্রহরী হিসাবে কল করুন , যদি না আপনি নিশ্চিত হন যে পর্যবেক্ষণযোগ্য প্রয়োগ কার্যকরভাবে বৈশ্বিক চলক তৈরি করে না, ইভেন্ট শ্রোতা যুক্ত করে না, টাইমার সেট করে না বা মেমরি ফাঁস হওয়ার ফলে অন্য কিছু করে না ।

সন্দেহ হলে, পর্যবেক্ষণযোগ্য এর বাস্তবায়নটি দেখুন। লক্ষণীয় মধ্যে কিছু পরিষ্কার আপ যুক্তিবিজ্ঞান লিখিত হয়ে থাকে তার unsubscribe(), যা সাধারণত ফাংশন যা কন্সট্রাকটর দ্বারা ফিরে হয়, তাহলে আপনি ভাল কারণ গম্ভীরভাবে কলিং বিবেচনা আছে unsubscribe()


6

কৌণিক 2 অফিশিয়াল ডকুমেন্টেশন কখন সাবস্ক্রাইব করতে হবে এবং কখন এটি নিরাপদে উপেক্ষা করা যেতে পারে তার একটি ব্যাখ্যা সরবরাহ করে। এই লিঙ্কটি একবার দেখুন:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

প্যারেন্ট এবং শিশুরা কোনও পরিষেবা এবং তারপরে নীল বাক্সের মাধ্যমে যোগাযোগ করে শিরোনাম সহ অনুচ্ছেদটি দেখুন :

লক্ষ্য করুন যে আমরা যখন সাবস্ক্রিপশন ক্যাপচার করেছি এবং অ্যাস্ট্রোনটকম্পোনেন্টটি ধ্বংস হয়ে যায় তখন সাবস্ক্রাইব করি। এটি একটি স্মৃতি-ফাঁস গার্ড পদক্ষেপ। এই অ্যাপ্লিকেশনটিতে কোনও প্রকৃত ঝুঁকি নেই কারণ কোনও অ্যাস্ট্রোনটকম্পোনেন্টের জীবনকাল অ্যাপ্লিকেশনটির জীবনকালের মতো। এটি আরও জটিল অ্যাপ্লিকেশনটিতে সর্বদা সত্য হবে না।

আমরা মিশনকন্ট্রোল কম্পোনেন্টে এই প্রহরীটিকে যুক্ত করি না কারণ পিতামাতা হিসাবে এটি মিশন সার্ভিসের জীবনকাল নিয়ন্ত্রণ করে।

এটি তোমাকে সাহায্য করবে বলে আশা করি।


3
উপাদান হিসাবে আপনি কখনই জানেন না যে আপনি শিশু বা না। অতএব আপনার সর্বদা সেরা অনুশীলন হিসাবে সাবস্ক্রিপশন থেকে সাবস্ক্রাইব করা উচিত।
সিরিয়াসম

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

6

উপর ভিত্তি করে: কৌণিক 2 উপাদান লাইফসাইলে হুক করতে বর্গ উত্তরাধিকার ব্যবহার

আর একটি জেনেরিক পদ্ধতি:

export abstract class UnsubscribeOnDestroy implements OnDestroy {
  protected d$: Subject<any>;

  constructor() {
    this.d$ = new Subject<void>();

    const f = this.ngOnDestroy;
    this.ngOnDestroy = () => {
      f();
      this.d$.next();
      this.d$.complete();
    };
  }

  public ngOnDestroy() {
    // no-op
  }

}

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

@Component({
    selector: 'my-comp',
    template: ``
})
export class RsvpFormSaveComponent extends UnsubscribeOnDestroy implements OnInit {

    constructor() {
        super();
    }

    ngOnInit(): void {
      Observable.of('bla')
      .takeUntil(this.d$)
      .subscribe(val => console.log(val));
    }
}


1
এটি সঠিকভাবে কাজ করে না। এই সমাধানটি ব্যবহার করার সময় দয়া করে সাবধান হন। আপনি this.componentDestroyed$.next()উপরের
সী

4

অফিসিয়াল সম্পাদনা # 3 উত্তর (এবং প্রকরণগুলি) ভালভাবে কাজ করে, তবে যে জিনিসটি আমাকে পেয়ে যায় তা পর্যবেক্ষণযোগ্য সাবস্ক্রিপশনটির চারপাশে ব্যবসায়ের যুক্তিটির 'কাদামাটা'।

এখানে র‍্যাপারস ব্যবহার করে অন্য একটি পদ্ধতির উপায়।

সতর্কতা: পরীক্ষামূলক কোড

ফাইল সাবস্ক্রাইবএন্ডগুয়ার্ড.টস মোড়ানোর জন্য .subscribe()এবং এর মধ্যে মোড়কের জন্য একটি নতুন পর্যবেক্ষণযোগ্য এক্সটেনশন তৈরি করতে ব্যবহৃত হয় ngOnDestroy()। উপাদানটি উল্লেখ করে অতিরিক্ত প্রথম প্যারামিটার বাদে ব্যবহার
একই রকম .subscribe()

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

const subscribeAndGuard = function(component, fnData, fnError = null, fnComplete = null) {

  // Define the subscription
  const sub: Subscription = this.subscribe(fnData, fnError, fnComplete);

  // Wrap component's onDestroy
  if (!component.ngOnDestroy) {
    throw new Error('To use subscribeAndGuard, the component must implement ngOnDestroy');
  }
  const saved_OnDestroy = component.ngOnDestroy;
  component.ngOnDestroy = () => {
    console.log('subscribeAndGuard.onDestroy');
    sub.unsubscribe();
    // Note: need to put original back in place
    // otherwise 'this' is undefined in component.ngOnDestroy
    component.ngOnDestroy = saved_OnDestroy;
    component.ngOnDestroy();

  };

  return sub;
};

// Create an Observable extension
Observable.prototype.subscribeAndGuard = subscribeAndGuard;

// Ref: https://www.typescriptlang.org/docs/handbook/declaration-merging.html
declare module 'rxjs/Observable' {
  interface Observable<T> {
    subscribeAndGuard: typeof subscribeAndGuard;
  }
}

এখানে দুটি সাবস্ক্রিপশন সহ একটি উপাদান রয়েছে, একটি মোড়কের সাথে এবং একটি ছাড়াই। কেবলমাত্র সতর্কতাই এটি অনডেস্ট্রয় অবশ্যই প্রয়োগ করতে হবে (যদি ইচ্ছা হয় খালি শরীরের সাথে থাকে), অন্যথায় অ্যাঙ্গুলার মোড়কানো সংস্করণটি কল করতে জানে না।

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import './subscribeAndGuard';

@Component({
  selector: 'app-subscribing',
  template: '<h3>Subscribing component is active</h3>',
})
export class SubscribingComponent implements OnInit, OnDestroy {

  ngOnInit() {

    // This subscription will be terminated after onDestroy
    Observable.interval(1000)
      .subscribeAndGuard(this,
        (data) => { console.log('Guarded:', data); },
        (error) => { },
        (/*completed*/) => { }
      );

    // This subscription will continue after onDestroy
    Observable.interval(1000)
      .subscribe(
        (data) => { console.log('Unguarded:', data); },
        (error) => { },
        (/*completed*/) => { }
      );
  }

  ngOnDestroy() {
    console.log('SubscribingComponent.OnDestroy');
  }
}

একটি ডেমো প্লাঙ্কার এখানে রয়েছে

একটি অতিরিক্ত নোট: পুনরায় সম্পাদনা করুন 3 - 'অফিসিয়াল' সমাধান, সাবস্ক্রিপশনের আগে টেকউইনটিল () এর পরিবর্তে টিকহাইল () ব্যবহার করে এবং এনজিওনডাস্ট্রয়ে অন্য পর্যবেক্ষণযোগ্য না হয়ে একটি সাধারণ বুলিয়ান ব্যবহার করে সহজ করা যেতে পারে।

@Component({...})
export class SubscribingComponent implements OnInit, OnDestroy {

  iAmAlive = true;
  ngOnInit() {

    Observable.interval(1000)
      .takeWhile(() => { return this.iAmAlive; })
      .subscribe((data) => { console.log(data); });
  }

  ngOnDestroy() {
    this.iAmAlive = false;
  }
}

3

যেহেতু সিউইংরাইটের সমাধান (সম্পাদনা 3) খুব দরকারী বলে মনে হচ্ছে, তাই এই বৈশিষ্ট্যটি বেস উপাদানগুলিতে প্যাক করা আমারও বেদনা বলে মনে হয়েছিল এবং এই বৈশিষ্ট্যটি সক্রিয় করার জন্য অন্যান্য প্রকল্পের সতীর্থদের এনজিওএনডাস্ট্রয়ে সুপার () কল করতে মনে রাখতে হবে।

এই উত্তরটি সুপার কল থেকে মুক্ত করার উপায় সরবরাহ করে এবং "উপাদান ডিস্ট্রয়েড $" কে বেস উপাদানটির একটি মূল হিসাবে তৈরি করে।

class BaseClass {
    protected componentDestroyed$: Subject<void> = new Subject<void>();
    constructor() {

        /// wrap the ngOnDestroy to be an Observable. and set free from calling super() on ngOnDestroy.
        let _$ = this.ngOnDestroy;
        this.ngOnDestroy = () => {
            this.componentDestroyed$.next();
            this.componentDestroyed$.complete();
            _$();
        }
    }

    /// placeholder of ngOnDestroy. no need to do super() call of extended class.
    ngOnDestroy() {}
}

এবং তারপরে আপনি নিখরচায় এই বৈশিষ্ট্যটি ব্যবহার করতে পারেন উদাহরণস্বরূপ:

@Component({
    selector: 'my-thing',
    templateUrl: './my-thing.component.html'
})
export class MyThingComponent extends BaseClass implements OnInit, OnDestroy {
    constructor(
        private myThingService: MyThingService,
    ) { super(); }

    ngOnInit() {
        this.myThingService.getThings()
            .takeUntil(this.componentDestroyed$)
            .subscribe(things => console.log(things));
    }

    /// optional. not a requirement to implement OnDestroy
    ngOnDestroy() {
        console.log('everything works as intended with or without super call');
    }

}

3

@ সেয়াং রাইটের উত্তর অনুসরণ করে , আমি একটি বিমূর্ত ক্লাস লিখেছি যা উপাদানগুলিতে "অসীম" পর্যবেক্ষণযোগ্যদের সাবস্ক্রিপশন পরিচালনা করে:

import { OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { PartialObserver } from 'rxjs/Observer';

export abstract class InfiniteSubscriberComponent implements OnDestroy {
  private onDestroySource: Subject<any> = new Subject();

  constructor() {}

  subscribe(observable: Observable<any>): Subscription;

  subscribe(
    observable: Observable<any>,
    observer: PartialObserver<any>
  ): Subscription;

  subscribe(
    observable: Observable<any>,
    next?: (value: any) => void,
    error?: (error: any) => void,
    complete?: () => void
  ): Subscription;

  subscribe(observable: Observable<any>, ...subscribeArgs): Subscription {
    return observable
      .takeUntil(this.onDestroySource)
      .subscribe(...subscribeArgs);
  }

  ngOnDestroy() {
    this.onDestroySource.next();
    this.onDestroySource.complete();
  }
}

এটি ব্যবহারের জন্য, কেবল এটি আপনার কৌণিক উপাদানটিতে প্রসারিত করুন এবং subscribe()পদ্ধতিটিকে নীচে কল করুন :

this.subscribe(someObservable, data => doSomething());

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

এখানে বেন লেশের একটি অতিরিক্ত রেফারেন্স খুঁজুন: আরএক্সজেএস: সাবস্ক্রাইব করবেন না


2

আমি সীউনরাইটের সমাধানটি চেষ্টা করেছি (3 সম্পাদনা করুন)

এটি পর্যবেক্ষণের জন্য কাজ করছে না যা টাইমার বা অন্তর দ্বারা নির্মিত।

যাইহোক, আমি অন্য পদ্ধতির ব্যবহার করে এটি কাজ করেছিলাম:

import { Component, OnDestroy, OnInit } from '@angular/core';
import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/Rx';

import { MyThingService } from '../my-thing.service';

@Component({
   selector: 'my-thing',
   templateUrl: './my-thing.component.html'
})
export class MyThingComponent implements OnDestroy, OnInit {
   private subscriptions: Array<Subscription> = [];

  constructor(
     private myThingService: MyThingService,
   ) { }

  ngOnInit() {
    const newSubs = this.myThingService.getThings()
        .subscribe(things => console.log(things));
    this.subscriptions.push(newSubs);
  }

  ngOnDestroy() {
    for (const subs of this.subscriptions) {
      subs.unsubscribe();
   }
 }
}

2

যদি উপশ্রেণী রেফারেন্সড আমি গত দুটি উত্তর মত, কিন্তু আমি কোনো সমস্যার সম্মুখীন "this"মধ্যেngOnDestroy

আমি এটিকে এটি হিসাবে পরিবর্তিত করেছি এবং দেখে মনে হচ্ছে এটি সমস্যার সমাধান করেছে।

export abstract class BaseComponent implements OnDestroy {
    protected componentDestroyed$: Subject<boolean>;
    constructor() {
        this.componentDestroyed$ = new Subject<boolean>();
        let f = this.ngOnDestroy;
        this.ngOnDestroy = function()  {
            // without this I was getting an error if the subclass had
            // this.blah() in ngOnDestroy
            f.bind(this)();
            this.componentDestroyed$.next(true);
            this.componentDestroyed$.complete();
        };
    }
    /// placeholder of ngOnDestroy. no need to do super() call of extended class.
    ngOnDestroy() {}
}

'এটি' বাঁধতে আপনাকে তীর ফাংশনটি ব্যবহার করতে হবে:this.ngOnDestroy = () => { f.bind(this)(); this.componentDestroyed$.complete(); };
দামসোরিয়ান

2

যদি সাবস্ক্রাইব প্রয়োজন হয় তবে পর্যবেক্ষণযোগ্য পাইপ পদ্ধতির জন্য নিম্নলিখিত অপারেটরটি ব্যবহার করা যেতে পারে

import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { OnDestroy } from '@angular/core';

export const takeUntilDestroyed = (componentInstance: OnDestroy) => <T>(observable: Observable<T>) => {
  const subjectPropertyName = '__takeUntilDestroySubject__';
  const originalOnDestroy = componentInstance.ngOnDestroy;
  const componentSubject = componentInstance[subjectPropertyName] as Subject<any> || new Subject();

  componentInstance.ngOnDestroy = (...args) => {
    originalOnDestroy.apply(componentInstance, args);
    componentSubject.next(true);
    componentSubject.complete();
  };

  return observable.pipe(takeUntil<T>(componentSubject));
};

এটি এভাবে ব্যবহার করা যেতে পারে:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({ template: '<div></div>' })
export class SomeComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    const observable = Observable.create(observer => {
      observer.next('Hello');
    });

    observable
      .pipe(takeUntilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy(): void {
  }
}

অপারেটর উপাদানটির ngOnDestroy পদ্ধতি মোড়ানো।

গুরুত্বপূর্ণ: পর্যবেক্ষণযোগ্য পাইপে অপারেটরটি সর্বশেষতম হওয়া উচিত।


এটি দুর্দান্ত কাজ করেছে, তবে কৌনিক 9 তে আপগ্রেড করা এটি হত্যা করে বলে মনে হচ্ছে। কেউ জানেন কেন?
ymerej

1

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

আপনার কি সাবস্ক্রাইব করা দরকার?

অ্যাক্টিভেটেডরউটে বর্ণিত হিসাবে: রাউটিং এবং নেভিগেশন পৃষ্ঠার রুট তথ্য বিভাগের এক-স্টপ-শপ, রাউটারটি সাবস্ক্রিপশন সরবরাহ এবং স্থানীয়করণের জন্য পর্যবেক্ষণযোগ্যদের পরিচালনা করে। মেমোরি ফাঁস থেকে রক্ষা করে উপাদানটি নষ্ট হয়ে গেলে সাবস্ক্রিপশনগুলি পরিষ্কার হয়ে যায়, সুতরাং আপনাকে প্যারামম্যাপ পর্যবেক্ষণযোগ্য রুটটি থেকে সদস্যতা ছাড়ার দরকার নেই।

একটি উপাদান তৈরি করতে এবং এটি ধ্বংস করার জন্য নীচের উদাহরণটি কৌনিক থেকে একটি ভাল উদাহরণ, কীভাবে উপাদানটি অনডেস্ট্রয় প্রয়োগ করে তা দেখুন, আপনার যদি অননিটের প্রয়োজন হয় তবে আপনি এটি আপনার উপাদানগুলিতে যেমন প্রয়োগগুলিও প্রয়োগ করতে পারেন OnInit, OnDestroy

import { Component, Input, OnDestroy } from '@angular/core';  
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})

export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;

  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }

  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }

  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

2
বিভ্রান্ত। আপনি এখানে কি বলছেন? আপনি (কৌণিক সাম্প্রতিক ডক্স / নোটগুলি) বলে মনে হচ্ছে যে কৌনিকটি তার যত্ন নেয় এবং তারপরে সাবস্ক্রাইব করা ভাল প্যাটার্ন এটি নিশ্চিত করার জন্য। ধন্যবাদ।
জ্যামি

1

উল্লিখিত পরিস্থিতিতে আরও একটি সংক্ষিপ্ত সংযোজন:

  • সর্বদা সাবস্ক্রাইব করুন, যখন সাবস্ক্রাইব করা স্ট্রিমে নতুন মানগুলি আর প্রয়োজন হয় না বা বিষয়টি বিবেচনা করে না, এর ফলে কম সংখ্যক ট্রিগার এবং কয়েকটি ক্ষেত্রে কর্মক্ষমতা বৃদ্ধি পেতে পারে। ক্ষেত্রে যেমন সাবস্ক্রাইব করা ডেটা / ইভেন্টের অস্তিত্ব নেই বা সমস্ত নতুন স্ট্রিমের নতুন সাবস্ক্রিপশন প্রয়োজন (রিফ্রেশ ইত্যাদি) সাবস্ক্রিপশনের জন্য একটি ভাল উদাহরণ।

0

এ এসপিএ অ্যাপ্লিকেশনে ngOnDestroy ফাংশন (কৌণিক জীবনচক্র) এর জন্য প্রতিটি সাবস্ক্রাইব আপনি প্রয়োজন সদস্যতামুক্ত করুন। সুবিধা => রাজ্যটিকে ভারী হওয়ার হাত থেকে রক্ষা করতে।

উদাহরণস্বরূপ: উপাদান 1:

import {UserService} from './user.service';

private user = {name: 'test', id: 1}

constructor(public userService: UserService) {
    this.userService.onUserChange.next(this.user);
}

সেবা:

import {BehaviorSubject} from 'rxjs/BehaviorSubject';

public onUserChange: BehaviorSubject<any> = new BehaviorSubject({});

উপাদান 2:

import {Subscription} from 'rxjs/Subscription';
import {UserService} from './user.service';

private onUserChange: Subscription;

constructor(public userService: UserService) {
    this.onUserChange = this.userService.onUserChange.subscribe(user => {
        console.log(user);
    });
}

public ngOnDestroy(): void {
    // note: Here you have to be sure to unsubscribe to the subscribe item!
    this.onUserChange.unsubscribe();
}

0

সাবস্ক্রিপশন পরিচালনা করার জন্য আমি একটি "সাবস্ক্রাইবার" শ্রেণি ব্যবহার করি।

এখানে আনসউসক্রাইবার ক্লাস।

export class Unsubscriber implements OnDestroy {
  private subscriptions: Subscription[] = [];

  addSubscription(subscription: Subscription | Subscription[]) {
    if (Array.isArray(subscription)) {
      this.subscriptions.push(...subscription);
    } else {
      this.subscriptions.push(subscription);
    }
  }

  unsubscribe() {
    this.subscriptions
      .filter(subscription => subscription)
      .forEach(subscription => {
        subscription.unsubscribe();
      });
  }

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

এবং আপনি এই শ্রেণিটি যে কোনও উপাদান / পরিষেবা / প্রভাব ইত্যাদিতে ব্যবহার করতে পারেন

উদাহরণ:

class SampleComponent extends Unsubscriber {
    constructor () {
        super();
    }

    this.addSubscription(subscription);
}

0

আপনি Subscriptionএত অগোছালো কোড না দিয়ে পর্যবেক্ষণযোগ্যদের জন্য সদস্যতা নিতে সর্বশেষতম ক্লাস ব্যবহার করতে পারেন ।

আমরা normal variableএটির সাথে এটি করতে পারি তবে এটি override the last subscriptionপ্রতিটি নতুন সাবস্ক্রাইবগুলিতে থাকবে সুতরাং এটি এড়াতে পারবেন এবং আপনি যখন আরও বেশি সংখ্যক অবসরেবলের সাথে লেনদেন করছেন এবং এই জাতীয় পছন্দ মতো পছন্দ করুন BehavoiurSubjectএবংSubject

চাঁদা

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

আপনি এটি দুটি উপায়ে ব্যবহার করতে পারেন,

  • আপনি সাবস্ক্রিপশন অ্যারেতে সাবস্ক্রিপশনটি সরাসরি চাপতে পারেন

     subscriptions:Subscription[] = [];
    
     ngOnInit(): void {
    
       this.subscription.push(this.dataService.getMessageTracker().subscribe((param: any) => {
                //...  
       }));
    
       this.subscription.push(this.dataService.getFileTracker().subscribe((param: any) => {
            //...
        }));
     }
    
     ngOnDestroy(){
        // prevent memory leak when component destroyed
        this.subscriptions.forEach(s => s.unsubscribe());
      }
    
  • ব্যবহার add()এরSubscription

    subscriptions = new Subscription();
    
    this.subscriptions.add(subscribeOne);
    this.subscriptions.add(subscribeTwo);
    
    ngOnDestroy() {
      this.subscriptions.unsubscribe();
    }
    

Subscriptionশিশুদের সাবস্ক্রিপশন ধরে রাখতে পারে এবং নিরাপদে সেগুলি সমস্ত আনসাবস্ক্রাইব করতে পারে। এই পদ্ধতিটি সম্ভাব্য ত্রুটিগুলি পরিচালনা করে (উদাহরণস্বরূপ যদি কোনও শিশুদের সাবস্ক্রিপশন বাতিল হয়)।

আশাকরি এটা সাহায্য করবে.. :)


0

সাবসিংক প্যাকেজ, সাবস্ক্রাইব করার জন্য একটি সহজ এবং ধারাবাহিক সমাধান

যেহেতু অন্য কারও এটি উল্লেখ করা হয়নি, আমি ওয়ার্ড বেলের দ্বারা নির্মিত সাবস্কিপ প্যাকেজটি সুপারিশ করতে চাই: https://github.com/wardbell/subsink#readme

আমি এটি কোনও প্রকল্পে ব্যবহার করে যাচ্ছিলাম আমরা সবাই এটি ব্যবহার করে বেশ কয়েকজন বিকাশকারী। এটি প্রতিটি পরিস্থিতিতে একটি নিয়মিত পদ্ধতিতে কাজ করতে অনেক সহায়তা করে।


0

ফলাফল নির্গতের পরে সরাসরি সম্পূর্ণ হওয়া পর্যবেক্ষণযোগ্যদের AsyncSubjectজন্য বা উদাহরণস্বরূপ HTTP অনুরোধগুলি থেকে পর্যবেক্ষণযোগ্য এবং আপনাকে সদস্যতা ছাড়াই হবে না। একে ডাকতে আঘাত না unsubscribe()তাদের জন্য, কিন্তু যদি পর্যবেক্ষণযোগ্য হয় closedআনসাবস্ক্রাইব পদ্ধতি কেবল কিছু করতে হবে না :

if (this.closed) {
  return;
}

যখন আপনার দীর্ঘকালীন পর্যবেক্ষণযোগ্য রয়েছে যা সময়ের সাথে সাথে বেশ কয়েকটি মান নির্গত করে (উদাহরণস্বরূপ ক BehaviorSubjectবা এ ReplaySubject) মেমরি ফাঁস রোধ করতে আপনাকে সদস্যতা বাতিল করতে হবে।

আপনি সহজেই একটি পর্যবেক্ষণযোগ্য তৈরি করতে পারেন যা পাইপ অপারেটর ব্যবহার করে দীর্ঘকালীন পর্যবেক্ষণযোগ্যদের থেকে ফলাফল নির্গতের পরে সরাসরি সম্পূর্ণ হয়। কিছু উত্তরে take(1)পাইপের উল্লেখ রয়েছে। কিন্তু আমি পছন্দ নল । পার্থক্য হ'ল এটি হবে:first()take(1)

একটি উদ্ধার EmptyErrorপর্যবেক্ষক ত্রুটি কলব্যাক করার যদি থাকে পরবর্তী প্রজ্ঞাপন আগে পর্যবেক্ষণযোগ্য সম্পন্ন হয়ে পাঠানো হয়েছে।

প্রথম পাইপের আর একটি সুবিধা হ'ল আপনি এমন একটি প্রাকটিক পাস করতে পারেন যা আপনাকে নির্দিষ্ট মানদণ্ডকে সন্তুষ্টকারী প্রথম মানটি ফিরিয়ে দিতে সহায়তা করবে:

const predicate = (result: any) => { 
  // check value and return true if it is the result that satisfies your needs
  return true;
}
observable.pipe(first(predicate)).subscribe(observer);

প্রথমটি প্রথম মান নির্গমনের পরে সরাসরি সম্পূর্ণ হবে (বা কোনও ফাংশন আর্গুমেন্ট পাস করার সময় প্রথম মান যা আপনার প্রস্তাবকে সন্তুষ্ট করে) তাই সাবস্ক্রাইব করার দরকার নেই।

আপনার দীর্ঘকাল পর্যবেক্ষণযোগ্য কিনা তা সম্পর্কে আপনি নিশ্চিত নন। আমি বলছি না এটি একটি ভাল অনুশীলন তবে আপনি firstনিজে সবসময় পাইপটি কেবল যোগ করতে পারেন তা নিশ্চিত করার জন্য আপনাকে ম্যানুয়ালি সাবস্ক্রাইব করার দরকার নেই। firstএকটি পর্যবেক্ষনে অতিরিক্ত পাইপ যুক্ত করা যা কেবলমাত্র এক মানকেই আঘাত দেয় না।

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

observable.pipe(single()).subscribe(observer);

firstএবং singleঅনুরূপ বলে মনে হচ্ছে, উভয় পাইপ একটি ঐচ্ছিক সম্পৃক্ত নিতে পারেন কিন্তু পার্থক্য গুরুত্বপূর্ণ এবং চমত্কারভাবে সংক্ষিপ্ত করা হয় এই Stackoverflow উত্তর এখানে :

প্রথম

প্রথম আইটেমটি উপস্থিত হওয়ার সাথে সাথে নির্গত হবে। তারপরেই সম্পূর্ণ হবে।

একক

উত্স পর্যবেক্ষণযোগ্য বেশ কয়েকটি ইভেন্ট নির্গত হলে ব্যর্থ হবে।


দ্রষ্টব্য সরকারী ডকুমেন্টেশনের উল্লেখ সহ আমি আমার উত্তরে যথাসম্ভব নির্ভুল এবং সম্পূর্ণ হওয়ার চেষ্টা করেছি, তবে দয়া করে গুরুত্বপূর্ণ কিছু অনুপস্থিত থাকলে মন্তব্য করুন ...


-1

--- কৌণিক 9 এবং Rxjs 6 সমাধান আপডেট করুন

  1. কৌণিক উপাদানটির জীবনচক্র ব্যবহার unsubscribeকরাngDestroy
class SampleComponent implements OnInit, OnDestroy {
  private subscriptions: Subscription;
  private sampleObservable$: Observable<any>;

  constructor () {}

  ngOnInit(){
    this.subscriptions = this.sampleObservable$.subscribe( ... );
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}
  1. takeUntilআরএক্সজেএসে ব্যবহার করা হচ্ছে
class SampleComponent implements OnInit, OnDestroy {
  private unsubscribe$: new Subject<void>;
  private sampleObservable$: Observable<any>;

  constructor () {}

  ngOnInit(){
    this.subscriptions = this.sampleObservable$
    .pipe(takeUntil(this.unsubscribe$))
    .subscribe( ... );
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}
  1. কিছু ক্রিয়াকলাপের জন্য যা আপনি ngOnInitডেকেছিলেন কেবলমাত্র একবারে যখন উপাদানটি এনআইডি হয়।
class SampleComponent implements OnInit {

  private sampleObservable$: Observable<any>;

  constructor () {}

  ngOnInit(){
    this.subscriptions = this.sampleObservable$
    .pipe(take(1))
    .subscribe( ... );
  }
}

আমাদের পাইপও আছে async। তবে, এটি টেমপ্লেটে একটি ব্যবহার (কৌণিক উপাদান নয়)।


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