angular - लेबल क्या है




कोणीय-घटक में मॉड्यूल का अर्थ क्या है? (6)

Angular की बीटा रिलीज़ (vesion 2-Alpha.51 के बाद से) @Component डेकोरेटर में templateUrl और styleUrls जैसे घटकों के लिए सापेक्ष आस्तियों का समर्थन करती है।

module.id काम करता है जब CommonJS का उपयोग करता है। आपको इस बारे में चिंता करने की आवश्यकता नहीं है कि यह कैसे काम करता है।

याद रखें : मॉड्यूलआईड की स्थापना: मॉड्यूल.डॉट इन @ कॉम्पोनेंट डेकोरेटर यहां की कुंजी है। यदि आपके पास ऐसा नहीं है, तो कोणीय 2 आपकी फाइलों को मूल स्तर पर खोजेगा।

schwarty.com/2015/12/22/… स्रोत, @ प्रदीप जैन को धन्यवाद

16 सितंबर 2016 को अपडेट:

यदि आप बंडल बनाने के लिए वेबपैक का उपयोग कर रहे हैं तो आपको डेकोरेटर में module.id जरूरत नहीं है। वेब बंडल प्लगइन्स ऑटो हैंडल (इसे जोड़ें) module.id । अंतिम बंडल में

एक कोणीय ऐप में, मैंने देखा है कि @Component में प्रॉपर्टी moduleId । इसका क्या मतलब है?

और जब module.id कहीं भी परिभाषित नहीं होता है, तब भी ऐप काम करता है। यह अभी भी कैसे काम कर सकता है?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

इस मॉड्यूलआईडी मूल्य का उपयोग कोणीय प्रतिबिंब प्रक्रियाओं और मेटाडेटा_रसोलर घटक द्वारा घटक के निर्माण से पहले पूरी तरह से योग्य घटक पथ का मूल्यांकन करने के लिए किया जाता है।


यदि आपको typescript error मिलती है, तो बस अपनी फ़ाइल में चर declare करें।

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

module कीवर्ड node पर उपलब्ध node । इसलिए यदि आप अपने प्रोजेक्ट में @types/node स्थापित करते हैं, तो आपको इसकी declare करने की आवश्यकता के बिना module कीवर्ड स्वचालित रूप से आपकी टाइपस्क्रिप्ट फ़ाइलों में उपलब्ध होगा।

npm install -D @types/node

आपके कॉन्फ़िगरेशन के आधार पर, आपको टूलिंग प्राप्त करने के लिए इसे अपनी tsconfig.json फ़ाइल में शामिल करना पड़ सकता है:

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

शुभ लाभ


echonax और Nishchit Dhanani से महान स्पष्टीकरण के अलावा, मैं जोड़ना चाहता हूं, कि मैं वास्तव में Nishchit Dhanani साथ घटकों की आबादी से नफरत करता हूं। विशेष रूप से, यदि आपके पास (अहेड-ऑफ-टाइम) AoT-compilation और एक यथार्थवादी परियोजना के लिए यह वही है जो आपको लक्ष्य करना चाहिए, तो आपके घटक मेटाडेटा में module.id जैसी कुछ भी जगह नहीं है।

AoT-compilation :

सिस्टम-लोडर और घटक-सापेक्ष URL का उपयोग करने वाले SystemJS संकलित अनुप्रयोग SystemJS लिए @Component.moduleId गुण सेट करना होगा। एओटी-संकलित ऐप चलने पर मॉड्यूल ऑब्जेक्ट अपरिभाषित है। जब तक आप इस तरह से index.html में एक वैश्विक मॉड्यूल मान असाइन नहीं करते हैं, तब तक एप्लिकेशन एक शून्य संदर्भ त्रुटि के साथ विफल रहता है:

<script>window.module = 'aot';</script>

मुझे लगता है कि index.html फ़ाइल के उत्पादन संस्करण में यह लाइन होना बिल्कुल स्वीकार्य नहीं है!

इसलिए, लक्ष्य के पास विकास के लिए (जस्ट-इन-टाइम) जीईटी-संकलन है और निम्न घटक मेटाडेटा परिभाषा के साथ उत्पादन के लिए एओटी समर्थन है: ( moduleId: module.id बिना moduleId: module.id लाइन)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

उसी समय मैं अपने my.component.ts फ़ाइल पथों के सापेक्ष my.component.html जैसे my.component.css और टेम्पलेट फ़ाइलों की तरह शैलियों को रखना चाहूंगा।

यह सब प्राप्त करने के लिए, मैं जिस समाधान का उपयोग कर रहा हूं, वह कई निर्देशिका स्रोतों से विकास चरण के दौरान वेब सर्वर (लाइट-सर्वर या ब्राउज़र-सिंक) की मेजबानी करना है!

bs-config.json :

{
  "port": 8000,
  "server": ["app", "."]
}

कृपया मेरे विवरण के लिए इस answer पर एक नज़र डालें।

अनुकरणीय कोणीय 2 त्वरित शुरुआत परियोजना, जो इस दृष्टिकोण पर निर्भर करती है, here होस्ट की गई here


(2017-03-13) के लिए अपडेट करें :

मॉड्यूलआईडी के सभी उल्लेख हटा दिए गए हैं। "घटक सापेक्ष पथ" रसोई की किताब नष्ट कर दिया

हमने अपने अनुशंसित SystemJS विन्यास में एक नया SystemJS प्लगइन (systemjs-angular-loader.js) जोड़ा। यह प्लगइन डायनामिक रूप से "कंपोनेंट-रिलेटिव" पाथ को टेम्प्लेट यूआरएल और स्टाइल यूआरएल में आपके लिए "संपूर्ण पथ" में परिवर्तित करता है।

हम आपको केवल घटक-सापेक्ष पथ लिखने के लिए प्रोत्साहित करते हैं। इन डॉक्स में चर्चा किए गए URL का एकमात्र रूप है। अब आपको न तो @Component({ moduleId: module.id }) लिखने की जरूरत है, न ही आपको।

स्रोत: https://angular.io/docs/ts/latest/guide/change-log.html

परिभाषा:

moduleId?: string

moduleId पैरामीटर @Component एनोटेशन के अंदर एक string मान लेता है जो है;

" मॉड्यूल की मॉड्यूल आईडी जिसमें घटक शामिल है। "

सामान्य उपयोग:

SystemJS का उपयोग: __moduleName

moduleId का उपयोग करने का कारण :

moduleId का उपयोग आपकी स्टाइलशीट और टेम्प्लेट के लिए रिश्तेदार पथों को हल करने के लिए किया जाता है जैसा कि दस्तावेज में कहा गया है।

मॉड्यूल की मॉड्यूल आईडी जिसमें घटक होता है। टेम्प्लेट और शैलियों के लिए सापेक्ष यूआरएल को हल करने में सक्षम होने की आवश्यकता है। डार्ट में, यह स्वचालित रूप से निर्धारित किया जा सकता है और इसे सेट करने की आवश्यकता नहीं है। CommonJS में, इसे हमेशा मॉड्यूल.id पर सेट किया जा सकता है।

Ref (पुराना): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

हम घटक श्रेणी फ़ाइल के सापेक्ष टेम्पलेट और शैली फ़ाइलों के स्थान निर्दिष्ट कर सकते हैं बस @Componate मेटाडेटा के मॉड्यूलआईडी गुण सेट करके

रेफरी: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

उदाहरण का उपयोग:

फ़ोल्डर संरचना:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html


मॉड्यूल के बिना।

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

मॉड्यूल के साथ :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...


@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

कोणीय डॉक्टर के अनुसार, आपको @Component ({मॉड्यूलआईड: मॉड्यूल.ड}) का उपयोग नहीं करना चाहिए

कृपया https://angular.io/docs/ts/latest/guide/change-log.html : https://angular.io/docs/ts/latest/guide/change-log.html

यहाँ उस पृष्ठ से प्रासंगिक पाठ दिया गया है:

मॉड्यूलआईडी के सभी उल्लेख हटा दिए गए हैं। "घटक सापेक्ष पथ" रसोई की किताब हटाई गई (2017-03-13)

हमने अपने अनुशंसित SystemJS विन्यास में एक नया SystemJS प्लगइन ( systemjs-angular-loader.js ) जोड़ा। यह प्लगइन डायनामिक रूप से "कंपोनेंट-रिलेटिव" पाथ को टेम्प्लेट यूआरएल और स्टाइल यूआरएल में आपके लिए "संपूर्ण पथ" में परिवर्तित करता है।

हम आपको केवल घटक-सापेक्ष पथ लिखने के लिए प्रोत्साहित करते हैं। इन डॉक्स में चर्चा किए गए URL का एकमात्र रूप है। अब आपको न तो @Component({ moduleId: module.id }) लिखने की जरूरत है, न ही आपको।





angular2-components