कोणीय एनकोमॉड्यूल में एंट्रीकॉम्पर्स क्या है?


131

मैं एक Ionicऐप ( 2.0.0-rc0) पर काम कर रहा हूं जो निर्भर करता है angular 2। तो का नया परिचय ngModulesशामिल है। मैं अपने app.module.ts.नीचे जोड़ रहा हूँ ।

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

entryComponentsयहाँ क्या करता है? Componentsमें पहले से ही परिभाषित हैं declarations। तो उन्हें दोहराने की क्या जरूरत है? अगर मैं यहां एक घटक शामिल नहीं करता तो क्या होगा?


4
कोणीय का उपयोग करता है entryComponents "पेड़ झटकों" यानी केवल घटक है कि वास्तव में सभी घटक है कि कर रहे हैं संकलन के बजाय परियोजना में उपयोग किया जाता संकलन सक्षम करने के लिए declaredमें ngModuleलेकिन इस्तेमाल कभी नहीं कर रहे हैं। angular.io/docs/ts/latest/cookbook/… एंट्रीकंप्यूटर -
समर

जवाबों:


155

यह गतिशील रूप से जोड़े गए घटकों के लिए है जिसका उपयोग करके जोड़ा जाता है ViewContainerRef.createComponent()। उन्हें entryComponentsसंकलित करने के लिए ऑफ़लाइन टेम्पलेट संकलक को बताता है और उनके लिए कारखानों का निर्माण करता है।

मार्ग कॉन्फ़िगरेशन में पंजीकृत घटकों को स्वचालित रूप से और entryComponentsसाथ ही जोड़ा जाता है क्योंकि DOM में रूट किए गए घटकों को जोड़ने के लिए router-outletभी उपयोग किया ViewContainerRef.createComponent()जाता है।

ऑफ़लाइन टेम्पलेट कंपाइलर (OTC) केवल उन घटकों का निर्माण करता है जो वास्तव में उपयोग किए जाते हैं। यदि घटकों को सीधे टेम्पलेट्स में उपयोग नहीं किया जाता है तो ओटीसी यह नहीं जान सकता है कि उन्हें संकलित करने की आवश्यकता है या नहीं। एंट्रीकॉम्पर्स के साथ आप ओटीसी को इस घटकों को भी संकलित करने के लिए कह सकते हैं ताकि वे रनटाइम पर उपलब्ध हों।

प्रवेश घटक क्या है? (Angular.io)

NgModule डॉक्स (angular.io)

उन घटकों को परिभाषित करता है जिन्हें इस घटक को परिभाषित करने के साथ ही संकलित किया जाना चाहिए। यहां सूचीबद्ध प्रत्येक घटकों के लिए, कोणीय एक ComponentFactory बनाकर ComponentFactoryResolver में संग्रहीत करेगा।

यदि आप एक गतिशील रूप से जोड़े गए घटक को सूचीबद्ध नहीं करते हैं, entryComponentsतो आपको एक त्रुटि संदेश मिल जाएगा एक डटकर एक लापता कारखाना क्योंकि एंगुलर ने एक नहीं बनाया होगा।

Https://angular.io/docs/ts/latest/cookbook/dynamic-component-load.html भी देखें


12
स्पष्ट रूप से, मैं इसका 100% सही उत्तर जानता हूं, लेकिन मेरे लिए बाउंसर गया, क्या आप अधिक विस्तृत कर सकते हैं?
पंकज पारकर

26
यह बताना मुश्किल है कि क्या अस्पष्ट है। ऑफ़लाइन टेम्पलेट कंपाइलर (OTC) केवल उन घटकों का निर्माण करता है जो वास्तव में उपयोग किए जाते हैं। यदि घटकों को सीधे टेम्पलेट्स में उपयोग नहीं किया जाता है तो ओटीसी यह नहीं जान सकता है कि उन्हें संकलित करने की आवश्यकता है या नहीं। साथ entryComponentsआप ओटीसी बता भी इस घटक संकलित करने के लिए तो वे क्रम में उपलब्ध हैं कर सकते हैं।
गुंटर ज़ोचबॉयर

3
stackoverflow.com/questions/36325212/… इस तरह का एक उदाहरण होगा
गुंटर ज़ोचबॉयर

2
तो सामान्य तौर पर, अगर घटक को सूचीबद्ध किया गया है तो declarationsउसे भी entryComponents, सही में सूचीबद्ध किया जाना चाहिए ?
omnomnom

1
केवल यदि कोई घटक createComponentआपके कोड में गतिशील रूप से जोड़ा जाता है या उदाहरण के लिए राउटर जो घटकों को जोड़ने के लिए थोड एपीआई का उपयोग करता है।
गुंटर ज़ोचबॉयर

30

आपको एनग्युलर डॉक्स से बेहतर विवरण नहीं मिलेगा: एंट्री-कंपोनेंट्स और एनकमोड्यूल-फैक

और नीचे कोणीय डॉक्स से स्पष्टीकरण है।

एक प्रवेश घटक कोई भी घटक है जो कोणीय प्रकार से अनिवार्य रूप से लोड करता है।

इसके चयनकर्ता के माध्यम से घोषित रूप से लोड किया गया एक घटक एक प्रवेश घटक नहीं है।

अधिकांश एप्लिकेशन घटकों को घोषित रूप से लोड किया जाता है। टेम्प्लेट में तत्व का पता लगाने के लिए कोणीय घटक के चयनकर्ता का उपयोग करता है। यह तब घटक का HTML प्रतिनिधित्व बनाता है और इसे चयनित तत्व पर DOM में सम्मिलित करता है। ये प्रवेश घटक नहीं हैं।

कुछ घटक केवल गतिशील रूप से लोड किए जाते हैं और घटक टेम्पलेट में कभी संदर्भित नहीं होते हैं।

बूटस्ट्रैप्ड रूट AppComponentएक प्रविष्टि घटक है। सही है, इसका चयनकर्ता index.html में एक तत्व टैग से मेल खाता है। लेकिन index.htmlएक घटक टेम्पलेट नहीं है और AppComponentचयनकर्ता किसी भी घटक टेम्पलेट में एक तत्व से मेल नहीं खाता है।

कोणीय गतिशील रूप से लोड होता है क्योंकि यह या तो प्रकार द्वारा सूचीबद्ध होता है @NgModule.bootstrapया मॉड्यूल की ngDoBootstrap विधि के साथ अनिवार्य रूप से बढ़ाया जाता है।

मार्ग परिभाषाओं में घटक भी प्रवेश घटक हैं। एक मार्ग परिभाषा एक घटक को उसके प्रकार से संदर्भित करती है। राउटर एक रूट किए गए घटक के चयनकर्ता (यदि इसमें एक भी है) को अनदेखा करता है और घटक को गतिशील रूप से लोड करता है RouterOutlet

कंपाइलर इन एंट्री कंपोनेंट्स को दूसरे कंपोनेंट टेम्प्लेट में खोज कर नहीं खोज सकते। आपको उन्हें entryComponentsसूची में जोड़कर उनके बारे में बताना होगा ।

कोणीय स्वचालित रूप से मॉड्यूल के निम्नलिखित प्रकार के घटकों को जोड़ता है entryComponents:

  • @NgModule.bootstrapसूची में घटक ।
  • राउटर कॉन्फ़िगरेशन में संदर्भित घटक।

आपको इन घटकों का स्पष्ट रूप से उल्लेख नहीं करना है, हालांकि ऐसा करना हानिरहित है।


अभी कोणीय डॉक्स उपलब्ध नहीं हैं, इसलिए उसके लिए धन्यवाद!
Caelum

यह इस बात का उल्लेख नहीं करता है कि मार्ग कॉन्फ़िगरेशन में घटक स्वतः प्रविष्टिकॉमर्स में जुड़ जाते हैं (इसलिए आमतौर पर आपको इसे परिभाषित करने की आवश्यकता नहीं होती है)।
कोनर

यदि हम विशेषता को EntryComponentहटाने के लिए उपयोग किए जाने वाले घटक का निर्माण करते हैं selector? (क्योंकि यह उपयोग नहीं किया जाएगा)
रोनन

24

अन्य उत्तर इसका उल्लेख करते हैं लेकिन मूल सारांश यह है:

  • इसकी आवश्यकता तब होती है जब कोई घटक HTML टेम्पलेट के अंदर उपयोग नहीं किया जाता है <my-component />
  • उदाहरण के लिए जब कोणीय सामग्री संवाद घटकों का उपयोग करते हैं तो आप परोक्ष रूप से घटक का उपयोग करते हैं।

सामग्री संवाद घटक TS कोड के अंदर बनाए जाते हैं न कि टेम्पलेट:

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

इसके लिए आपको इसे एक प्रविष्टि के रूप में पंजीकृत करना होगा।

  • entryComponents: [MyExampleDialog]

अन्यथा आपको एक त्रुटि मिलती है:

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

2
यहाँ पर सबसे अच्छा स्पष्टीकरण।
एनओपी

3

एंट्रीकॉम्पर्स सरणी का उपयोग केवल उन घटकों को परिभाषित करने के लिए किया जाता है जो HTML में नहीं पाए जाते हैं और गतिशील रूप से बनाए जाते हैं। कोणीय को इस संकेत को प्रविष्टि घटक खोजने और उन्हें संकलित करने की आवश्यकता होती है।

प्रवेश घटक के दो मुख्य प्रकार हैं:

  • बूटस्ट्रैप्ड रूट घटक।
  • एक घटक जिसे आप रूट परिभाषा में निर्दिष्ट करते हैं।

प्रवेश घटकों के आसपास अधिक विस्तृत जानकारी के लिए, कृपया angular.io https://angular.io/guide/entry-compenders देखें


1

पृष्ठभूमि के बारे में एक बिट entryComponent

entryComponentकिसी भी घटक कोणीय भार अनिवार्य रूप से है। आप entryComponentइसे NgModuleरूट परिभाषाओं में या बूटस्ट्रैप करके घोषित कर सकते हैं ।

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

दस्तावेज़ीकरण नीचे कहता है

दो प्रकार के घटकों के विपरीत, ऐसे घटक हैं जो टेम्पलेट में शामिल हैं, जो कि घोषणात्मक हैं। इसके अतिरिक्त, ऐसे घटक हैं जो आप अनिवार्य रूप से लोड करते हैं; वह है, प्रवेश घटक।

अब आपके विशिष्ट प्रश्न का उत्तर देने के लिए entryComponents

नहीं है entryComponentsमें सरणी @NgModuleफ़ाइल। entryComponentsयदि घटक का उपयोग करके बूट किया गया है, तो आप इसे जोड़ने के लिए इसका उपयोग कर सकते हैं ViewContainerRef.createComponent()

आप बूटस्ट्रैपिंग या टेम्पलेट द्वारा गतिशील रूप से घटक बना रहे हैं।

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

0

के रूप में कोणीय 9 entryComponents की आवश्यकता नहीं है धन्यवाद आइवी इस सुविधा को पदावनत करने की अनुमति देता है और इसलिए मॉड्यूल घोषणाओं से हटाया जा सकता है।

पदावनत एपीआई और विशेषताएं - entryComponentsऔर ANALYZE_FOR_ENTRY_COMPONENTSअब आवश्यकता नहीं है

पहले, परिभाषा entryComponentsमें सरणी NgModuleको कंपाइलर को बताने के लिए उपयोग किया जाता था कि कौन से घटक बनाए जाएंगे और गतिशील रूप से डाले जाएंगे। आइवी के साथ, यह अब कोई आवश्यकता नहीं है और entryComponentsसरणी को मौजूदा मॉड्यूल घोषणाओं से हटाया जा सकता है। वही ANALYZE_FOR_ENTRY_COMPONENTSइंजेक्शन टोकन पर लागू होता है ।

कोणीय आइवी

आइवी कोणीय की अगली पीढ़ी के संकलन और रेंडरिंग पाइपलाइन का कोड नाम है। कोणीय के संस्करण 9 के रिलीज के साथ, नए कंपाइलर और रनटाइम निर्देशों का उपयोग पुराने संकलक और रनटाइम के बजाय डिफ़ॉल्ट रूप से किया जाता है, जिसे व्यू इंजन के रूप में जाना जाता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.