मेरे घटक में मुझे @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>

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

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

1
user2622344 16 फरवरी 2021, 13:10

2 जवाब

सबसे बढ़िया उत्तर

मेरा सुझाव है कि आप दृष्टिकोण 2 के साथ जाएं। आपके स्वयं के प्रवेश के माध्यम से यह साफ और पालन करने में आसान लगता है।

कल्पना कीजिए कि कोई भविष्य में साथ आता है और वे एक async बाइंडिंग के साथ एक यादृच्छिक ng-container देखते हैं लेकिन कोई सामग्री नहीं। वे यह मानकर इसे हटाने का निर्णय ले सकते हैं कि अब इसका उपयोग नहीं किया जाता है, इस स्थिति में आपका पूरा tap ऑपरेशन नहीं चलेगा और आपको इसके प्रति सचेत करने के लिए कोई त्रुटि नहीं डाली जाएगी।

जबकि दृष्टिकोण 2 के माध्यम से पढ़ने वाला कोई व्यक्ति बहुत आसानी से देख सकता है कि क्या हो रहा है और सदस्यता को संशोधित करने के परिणाम स्पष्ट हैं।

मैन्युअल रूप से सदस्यता समाप्त करने में कुछ भी गलत नहीं है, आपको बस यह सुनिश्चित करने की आवश्यकता है कि आप इसे करते हैं!

1
Sam 16 फरवरी 2021, 14:28

आप पहले समाधान को "सर्वोत्तम अभ्यास" क्यों कहते हैं? आपके मामले में इसका कोई मतलब नहीं है, #2 का प्रयोग करें।

-1
Andrey 16 फरवरी 2021, 13:22