मैंने इस त्रुटि के बारे में प्रश्नों को देखा है, और समाधान नहीं मिला है।

मेरे पास एक हाइलाइट निर्देश है, और मैं एक इनपुट index लेता हूं। यह निर्देश तब काम करता है जब मैं इसे उस मॉड्यूल में घोषित करता हूं जिसमें मैं इसका उपयोग कर रहा हूं। लेकिन मैं इसे कई मॉड्यूल में उपयोग करना चाहता हूं, इसलिए मैंने घोषणा को हटा दिया, और इसे मेरे रूट मॉड्यूल के अंदर रखा जो त्रुटियों को आयात करता है। वह तब होता है जब मुझे त्रुटि मिलती है:

 Error: Template parse errors:
Can't bind to 'index' since it isn't a known property of 'div'. ("
                <div class="read row"
                    appListHighlight
                    [ERROR ->][index]="index"
                >
                    <div class="col"></div>
"): ng:///NetworkModule/DnsComponent.html@15:20

मेरा निर्देश:

import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';

@Directive({
    selector: '[appListHighlight]'
})
export class ListHighlightDirective implements OnInit{
    @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

    @Input() index: string;

    constructor() {}

    ngOnInit() {

        console.log('APP', this.index);

        if (+this.index % 2 === 0) {
            this.backgroundColor = 'rgba(128, 128, 128, 0.08)'
        }
    }
}

मेरा एचटीएमएल:

<div class="read row"
                    appListHighlight
                    [index]="index"
>

एचटीएमएल मेरे नेटवर्क मॉड्यूल के अंदर एक घटक का हिस्सा है, जिसे मेरे रूट मॉड्यूल में आयात किया जाता है जैसे:

import { ListHighlightDirective } from './shared/list-highlight.directive';
import { NetworkModule } from './network/network.module';

declarations: [
    AppComponent,
    ListHighlightDirective
],

तो क्या हो रहा है? यह क्यों काम करता है जब निर्देश मेरे नेटवर्क मॉड्यूल में आयात किया जाता है, लेकिन मेरा रूट मॉड्यूल नहीं? क्या रूट मॉड्यूल उस ऐप में सब कुछ संकलित नहीं करता है जिसे वह आयात करता है ताकि सभी आयात शामिल हों?

--------------------______अपडेट करें_____------------------------

मैंने एक साझा मॉड्यूल बनाया, और इसे आयात किया, लेकिन मुझे वही त्रुटि मिल रही है। मेरा मॉड्यूल इस तरह दिखता है:

import { ListHighlightDirective } from './list-highlight.directive';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    declarations: [
        ListHighlightDirective
    ],
    imports: [
        CommonModule
    ]
})

export class SharedModule { }
4
FussinHussin 17 अगस्त 2017, 01:42
अपने AppModule में FormsModule आयात करें
 – 
Faisal
17 अगस्त 2017, 01:46
मैंने अपने app.module.ts में फॉर्म मॉड्यूल आयात किया, कुछ भी नहीं, वही त्रुटि
 – 
FussinHussin
17 अगस्त 2017, 01:49
मैंने ListHighlightDirective को भी निर्यात करके अपनी समस्या को ठीक किया
 – 
FussinHussin
29 अगस्त 2017, 17:44

3 जवाब

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

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

इस तरह के कुछ के लिए एक अधिक सामान्य अभ्यास है appListHighlight को एक साझा मॉड्यूल में जोड़ना और फिर उस साझा मॉड्यूल को अपने नेटवर्क मॉड्यूल में आयात करना।

मेरे पास इन अवधारणाओं के बारे में एक यूट्यूब वीडियो है: https://www.youtube .com/watch?v=ntJ-P-Cvo7o&t=6s

या आप इसके बारे में यहां अधिक पढ़ सकते हैं: https://angular.io/guide/ngmodule-faq

नीचे दी गई तस्वीर में, मैं StarComponent के साथ कुछ ऐसा ही करता हूं, जो एक नेस्टेड घटक है जो किसी संख्या को रेटिंग सितारों में बदल देता है। आप अपने निर्देश के लिए इसी तकनीक का उपयोग कर सकते हैं।

enter image description here

13
DeborahK 17 अगस्त 2017, 02:17
मैंने इसे एक साझा मॉड्यूल में जोड़ा, लेकिन मुझे वही त्रुटि मिल रही है। मैंने साझा मॉड्यूल आयात किया, यह इस तरह दिखता है: './list-highlight.directive' से {ListHighlightDirective} आयात करें; {CommonModule} को '@angular/common' से इंपोर्ट करें; आयात { NgModule } '@angular/core' से; @NgModule ({घोषणाएँ: [ListHighlightDirective], आयात: [CommonModule]}) निर्यात वर्ग SharedModule { }
 – 
FussinHussin
29 अगस्त 2017, 17:23
उपरोक्त में ग्रे लाइनों के अनुसार, आपको इसे अपने निर्यात सरणी में भी जोड़ना होगा।
 – 
DeborahK
22 फरवरी 2018, 20:28

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

क्यों?

रन टाइम पर एंगुलर प्रत्येक मॉड्यूल को केस के आधार पर केस के आधार पर देखेगा। यदि निर्देश उप-मॉड्यूल में घोषित किया जाता है तो यह उस मॉड्यूल में घोषित घटकों के विरुद्ध जांच करेगा और उनके लिए निर्देश का उपयोग करेगा। यदि निर्देश आपके ऐप.मॉड्यूल में घोषित किया गया है तो यह केवल आपके ऐप.मॉड्यूल में सीधे घोषित घटकों के खिलाफ जांच करेगा।

समाधान?

सामान्य समाधान यह है कि आपको प्रत्येक मॉड्यूल में एक निर्देश घोषित करना चाहिए जहां आप इसका उपयोग करने वाले घटक की घोषणा करते हैं। दूसरा विकल्प एक साझा मॉड्यूल में निर्देश जोड़ना है, और हर दूसरे मॉड्यूल में साझा मॉड्यूल का उपयोग करना है जहां एक घटक निर्देश का उपयोग करता है।

1
Z. Bagley 17 अगस्त 2017, 02:21

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

import { ListHighlightDirective } from './list-highlight.directive';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    declarations: [
        ListHighlightDirective
    ],
    imports: [
        CommonModule
    ],
    exports: [
      ListHighlightDirective
    ]

})

export class SharedModule { }

अब आप जहां कहीं भी साझा मॉड्यूल आयात करेंगे, आप इसके निर्यात किए गए सदस्यों (घटकों/निर्देशों) का उपयोग करने में सक्षम होंगे।
इस उदाहरण के लिए, आप ListHighlightDirective का उपयोग कर सकते हैं।

1
ImFarhad 4 जून 2020, 13:54