क्या इस विशेष स्थिति में सदस्यता() के बजाय एसिंक-पाइप का उपयोग करना वाकई बेहतर है?

मेरे घटक में मुझे @Input() के रूप में एक अवलोकन योग्य मिलता है।

यदि अवलोकन योग्य का मान बदलता है, तो मुझे एक एनजी-बूटस्ट्रैप अकॉर्डियन का विस्तार/संक्षिप्त होना होगा। इसलिए मुझे वास्तव में टेम्प्लेट में ऑब्जर्वेबल के मूल्य की आवश्यकता नहीं है।

यह कोड है, मेरे पास पहले से ही है:

अवयव:

@Input() urlParam$!: Observable<string>;

@ViewChild('acc') accordion!: NgbAccordion;

urlParamChange$!: Observable<string>;

ngAfterViewInit(): void {
  this.urlParamChange$ = this.urlParam$.pipe(
    tap(urlParam => this.synchronizeAccordion(urlParam))
  );
}

synchronizeAccordion(urlParam: string): void {
// do something with this.accordion
}

और टेम्पलेट में मैं नए बनाए गए urlParamChange$ में async पाइप के माध्यम से सदस्यता लेता हूं:

<ng-container *ngIf="(urlParamChange$ | async)"></ng-container>

<ngb-accordion #acc="ngbAccordion">
 ....
</ngb-accordion>

चूंकि मुझे वास्तव में urlParamChange$ के मूल्य की आवश्यकता नहीं है, इसलिए मैंने इसे अपने एनजी-कंटेनर में रखा है, ताकि यह पूरी तरह से स्वतंत्र हो, लेकिन फिर भी अकॉर्डियन को सिंक्रोनाइज़ करने की विधि कहलाएगी।

मुझे लगता है, कि उपरोक्त कार्यान्वयन उतना अच्छा नहीं है। आप कार्रवाई को दो अलग-अलग फाइलों में विभाजित करते हैं (घटक में टैप की आवश्यकता होती है + इसके अतिरिक्त टेम्पलेट में एसिंक-पाइप)।

क्या यह निम्नलिखित तरीके से और भी अच्छा नहीं होगा? एसिंक-पाइप की मदद से सदस्यता लेने के बजाय, मैं इसके बजाय सीधे ngAfterViewInit () में सदस्यता () लूंगा। इस तरह मैं अतिरिक्त चर urlParamChange$ को हटा सकता हूं और कार्यान्वयन ngAfterViewInit() विधि में है।

अवयव:

@Input() urlParam$!: Observable<string>;

@ViewChild('acc') accordion!: NgbAccordion;

ngAfterViewInit(): void {
  this.urlParam$.subscribe(urlParam => this.synchronizeAccordion(urlParam));
}

synchronizeAccordion(urlParam: string): void {
// do something with this.accordion
}

और टेम्पलेट में अतिरिक्त एनजी-कंटेनर हटा दिया जाता है:

<ngb-accordion #acc="ngbAccordion">
 ....
</ngb-accordion>

मेरी राय में दोनों कार्यान्वयन ठीक उसी तरह काम करना चाहिए। सर्वोत्तम अभ्यासों के अनुसार, मुझे लगता है कि पहले समाधान को प्राथमिकता दी जानी चाहिए। लेकिन दूसरा क्लीनर आईएमओ है।

तो ऐसे उपयोग के मामले को लागू करने का सबसे अच्छा तरीका क्या है?