कोणीय 8 और 9 में 'विंडो' बनाम विंडो प्रदान करने और इंजेक्शन लगाने के बीच क्या अंतर है?

10

मेरे पास इन संस्करणों का उपयोग करते हुए दो कोणीय परियोजनाएं हैं:

9.0.0-next.6
8.1.0

संस्करण 9 में मैंने इसका उपयोग windowओब्जेक्ट को प्रदान करने और इंजेक्ट करने के लिए किया है:

@NgModule({
  providers: [
    {
      provide: Window,
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject(Window) private window: Window)
}

जो ठीक काम करता है।

संकलन के दौरान संस्करण 8 फेंक दी गई चेतावनी और त्रुटियों के लिए इस दृष्टिकोण को लेना:

चेतावनी: TestComponent के लिए सभी मापदंडों को हल नहीं कर सकते ...

मैंने इसे एकल उद्धरण का उपयोग करके हल किया, जैसे:

@NgModule({
  providers: [
    {
      provide: 'Window',
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject('Window') private window: Window)
}

दोनों संस्करण में क्या अंतर है?
इस चीज़ के कारण कोणीय 8 और 9 में क्या अंतर है?

— छाया
स्रोत

मुझे उम्मीद है कि बाउंटी के साथ मुझे एक उत्तर मिल सकता है जिससे मैं और अन्य बेहतर तरीके से समझ सकते हैं और समझ सकते हैं कि एंगुलर और फ्रेमवर्क के विभिन्न संस्करणों में प्रदाता और डि कैसे हैं।

— लैंपशेड

6

सर्वर साइड रेंडरिंग के साथ काम करने के लिए आपके ऐप के लिए मेरा सुझाव है कि आप न केवल टोकन के माध्यम से विंडो का उपयोग करें, बल्कि एसएसआर के अनुकूल तरीके से इस टोकन को बनाएं, बिना किसी संदर्भ के window। DOCUMENTएक्सेस करने के लिए कोणीय में अंतर्निहित टोकन है document। यहाँ मैं windowटोकन के माध्यम से अपनी परियोजनाओं का उपयोग करने के लिए आया हूँ :

import {DOCUMENT} from '@angular/common';
import {inject, InjectionToken} from '@angular/core';

export const WINDOW = new InjectionToken<Window>(
    'An abstraction over global window object',
    {
        factory: () => {
            const {defaultView} = inject(DOCUMENT);

            if (!defaultView) {
                throw new Error('Window is not available');
            }

            return defaultView;
        },
    },
);

— waterplea
स्रोत

उत्तर देने के लिए आपका धन्यवाद। यह बहुत उपयोगी है और मैं भविष्य में इस तरह के एक समाधान का उपयोग करने जा रहा हूं।

— लैंपशेड

5

ValueProviderइंटरफ़ेस को ध्यान में रखते हुए :

export declare interface ValueProvider extends ValueSansProvider {
    /**
     * An injection token. Typically an instance of `Type` or `InjectionToken`, but can be `any`.
     */
    provide: any;
    /**
     * When true, injector returns an array of instances. This is useful to allow multiple
     * providers spread across many files to provide configuration information to a common token.
     */
    multi?: boolean;
}

provideसंपत्ति प्रकार का है any। इसका मतलब है कि कोई भी वस्तु ( Windowकंस्ट्रक्टर को शामिल करते हुए ) उसके अंदर जा सकती है। ऑब्जेक्ट वास्तव में मायने नहीं रखता है, केवल संदर्भ मायने रखता है कि किस प्रदाता को एक निर्माता में एक पैरामीटर को इंजेक्ट करने के लिए उपयोग किया जाना चाहिए।

इसे देशी Windowकंस्ट्रक्टर को इंजेक्शन टोकन के रूप में उपयोग करने के लिए एक अच्छा अभ्यास नहीं माना जाना चाहिए । यह Windowएक ब्राउज़र वातावरण में रन टाइम पर मौजूद होने के कारण संकलन समय पर विफल रहता है, यह भी टाइपस्क्रिप्ट के रूप में मौजूद है, declareलेकिन कोणीय 8 कंपाइलर Windowप्रदाताओं और Windowएक निर्माता के मापदंडों में सहसंबंधित करने के लिए स्थैतिक कोड विश्लेषण नहीं कर सकता है , क्योंकि असाइनमेंट का काम Windowपूरा हो चुका है ब्राउज़र द्वारा, कोड द्वारा नहीं। यह सुनिश्चित नहीं है कि यह कोणीय 9 में काम क्यों करता है, हालांकि ...

आपको अपना खुद का इंजेक्शन टोकन बनाना चाहिए जो निर्भरता प्रदाता का प्रतिनिधित्व करता है। यह इंजेक्शन टोकन या तो होना चाहिए:

एक समर्पित स्ट्रिंग (जैसे आपने किया था 'Window')
एक समर्पित InjectionToken। उदाहरण के लिएexport const window = new InjectionToken<Window>('window');

इसके अलावा, कोणीय कोड प्लेटफ़ॉर्म एग्नॉस्टिक होना चाहिए (एक ब्राउज़र में और एक Node.js सर्वर पर भी निष्पादन योग्य होना चाहिए) ताकि किसी फ़ैक्टरी का उपयोग करना बेहतर होगा जो रिटर्न करता है windowऔर undefined/ null, फिर घटकों में undefined/ nullमामले को संभालता है ।

— ग्वारिक पी
स्रोत

1

आपके विस्तृत जवाब के लिए बहुत-बहुत धन्यवाद। इससे बहुत मदद मिली।

— लैंपशेड

1

बहुत अच्छा! धन्यवाद। मैंने केवल कोणीय डॉक्स (v8 और v9) की जांच की और मुझे एक भी उदाहरण नहीं मिला जहां वे तार का उपयोग करते हैं। :( उन्हें वास्तव में डॉक्स में यह समझाना चाहिए!

— ज़फॉइड