क्योंकि यह तत्व का ज्ञात गुण नहीं है, Angular2 DIRECTIVE से बंध नहीं सकता

Question

मैंने Angular CLI द्वारा नया @Directive उत्पन्न किया, इसे मेरे app.module.ts में आयात किया गया

import { ContenteditableModelDirective } from './directives/contenteditable-model.directive';

import { ChatWindowComponent } from './chat-window/chat-window.component';

@NgModule({
  declarations: [
    AppComponent,
    ContenteditableModelDirective,
    ChatWindowComponent,
    ...
  ],
  imports: [
    ...
  ],
  ...
})

और मैं अपने घटक (ChatWindowComponent) में उपयोग करने का प्रयास करता हूं

<p [appContenteditableModel] >
    Write message
</p>

भले ही निर्देश के भीतर केवल कोणीय सीएलआई उत्पन्न कोड हो:

 import { Directive } from '@angular/core';

 @Directive({
   selector: '[appContenteditableModel]'
 })
 export class ContenteditableModelDirective {

 constructor() { }

 }

मुझे त्रुटि मिली:

ज़ोन.जेएस: 388 अनहेल्दीड प्रॉमिस रिजेक्शन: टेम्प्लेट पार्स एरर्स: 'appContenteditableModel' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'p' की ज्ञात संपत्ति नहीं है।

मैंने लगभग हर संभव बदलावों की कोशिश की, इस कोणीय डॉक्स के बाद सब कुछ काम करना चाहिए लेकिन ऐसा नहीं है।

कोई मदद?

Comments

परिणाम मुझे चाहिए [(appContenteditableModel)]="draftMessage.text"अंत में है ...

— टॉमस Javurek

फिर इस तरह की कोशिश करें<p [appContenteditableModel]="draftMessage.text"></p>

— Sanket

यह ब्रैकेट्स के बिना काम करता है appContenteditableModel="draftMessage.text"और (appContenteditableMode)l="draftMessage.text"वादे की अस्वीकृति को भी हल करता है, लेकिन यह चर भी नहीं लगता है

— टॉमस जवुरेक

Answer 1

कोष्ठक में एक संपत्ति लपेटते समय []आप इसे बांधने की कोशिश कर रहे हैं। इसलिए आपको इसे एक घोषित करना होगा @Input।

import { Directive, Input } from '@angular/core';

@Directive({
 selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

महत्वपूर्ण हिस्सा यह है, कि सदस्य ( appContenteditableModel) को डोम नोड पर संपत्ति के रूप में नामित किया जाना चाहिए (और, इस मामले में, निर्देशक चयनकर्ता)।

Comments

मेरे निर्देशन में इनपुट @Input ('appContenteditableModel') model : any;और आउटपुट भी हैं @Output ('appContenteditableModel') update : EventEmitter<any> = new EventEmitter();। ऐसा लगता है कि मॉडल अच्छी तरह से काम करता है, लेकिन इसके द्वारा बुलाया एमिटर this.update.emit(value)मूल घटक में मूल्य नहीं बदलता है। मैं क्या गलत करूँ? [(appContenteditableModel)]="draftMessage.text"

— टॉमस जवुरेक

वास्तव में मैं <इनपुट> तत्व के बाहर "अनुकरण (") (ngModel) की कोशिश करता हूं

— टॉमस जावूरेक

@Outputकेवल घटनाओं के उत्सर्जन के लिए है। यदि आप मूल्य को माता-पिता के साथ सिंक में रखना चाहते हैं, तो आप @HostBindingएनोटेशन को जोड़ने पर विचार कर सकते हैं।

— naamamarth7

अगर मैं अच्छी तरह @HostBindingसे अंडरस्टैंड करूं तो html एलिमेंट के भीतर वैल्यू को सिंक करने में मदद मिलेगी, क्या मैं सही हूं? यह तत्व मुझे उपयोगकर्ता द्वारा संपादित करने की आवश्यकता है contenteditable="true"ताकि इनपुट मुझे उसी घटक में चर के साथ सिंक में रखने की आवश्यकता हो।

— टॉमस जवुरेक

Answer 2

यदि आप निर्देशन को परिभाषित करने के लिए एक साझा मॉड्यूल का उपयोग कर रहे हैं, तो सुनिश्चित करें कि यह घोषित और निर्यात किए गए मॉड्यूल द्वारा परिभाषित है।

// this is the SHARED module, where you're defining directives to use elsewhere
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [NgIfEmptyDirective, SmartImageDirective],
  exports: [NgIfEmptyDirective, SmartImageDirective]
})

Comments

और क्या होगा अगर वे एक ही मॉड्यूल में नहीं हैं?

— ओहद सदन

@OadSadan मुझे यकीन नहीं है कि आपका क्या मतलब है। यह एक उदाहरण है जब आप उन्हें एक ही मॉड्यूल में नहीं रखते हैं, और मैं कह रहा हूं कि यदि आप उन्हें एक साझा मॉड्यूल में बना रहे हैं (जो आपको तब चाहिए तो उन्हें एक आयात करें अलग मॉड्यूल)।

— सिमोन_विवर

अपने 'मुख्य' मॉड्यूल में आपको केवल 'निर्देश मॉड्यूल' आयात करने की आवश्यकता होती है और फिर आपके सभी घटक उन्हें देख सकते हैं।

— सिमोन_विवर

यह एक मिनट का विवरण है लेकिन अक्सर याद किया जाता है। धन्यवाद !

— सामी

Answer 3

मेरे लिए ठीक जड़ से निर्देश संदर्भ आगे बढ़ रहा था app.module.ts(लाइनों के लिए import, declarationsऔर / या exportsअधिक विशिष्ट मॉड्यूल के लिए) src/subapp/subapp.module.tsमेरे घटक के थे।

Answer 4

संक्षेप में, क्योंकि आपका निर्देश एक एंकर निर्देश की तरह दिखता है , कोष्ठक हटा दें और यह काम करेगा।

वास्तव में, मुझे संबंधित अनुभाग नहीं मिले हैं कि कोष्ठक को हटाया जाना चाहिए या नहीं, जहां केवल एक उल्लेख मैंने पाया है जो गतिशील घटकों पर अनुभाग में स्थित है :

उस वर्ग कोष्ठक के बिना लागू करें<ng-template>

, जो हालांकि एट्रीब्यूट डायरेक्शंस डॉक्यूमेंट में पूरी तरह से कवर नहीं है ।

व्यक्तिगत रूप से, मैं आपके साथ सहमत हूं और सोच रहा था कि [appContenteditableModel]समान होना चाहिए appContenteditableModelऔर कोणीय टेम्पलेट पार्सर चारों ओर काम कर सकता है चाहे @input()डेटा बाइंडिंग हो या स्वचालित रूप से नहीं। लेकिन वे वास्तव में हुड के नीचे समान रूप से संसाधित नहीं लगते हैं, यहां तक ​​कि 7 के वर्तमान कोणीय संस्करण में भी।

Answer 5

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

import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appDisableControl]'
})
export class DisableControlDirective {

  constructor(private ngControl: NgControl) { }

  @Input('disableControl') set disableControl( condition: boolean) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

}

इसे ठीक से काम करने के लिए, साझा मॉड्यूल (या आपके द्वारा उपयोग किए जा रहे किसी भी मॉड्यूल) में निर्देश को घोषित और निर्यात करें।

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DisableControlDirective } from './directives/disable-control/disable-control.directive';

@NgModule({
  declarations: [
    DisableControlDirective
  ],
  imports: [
    CommonModule
  ],
  exports: [DisableControlDirective],
  providers: [],
  bootstrap: []
})
export class SharedModule { }

अब हम इस निर्देश का उपयोग किसी भी मॉड्यूल में कर सकते हैं जहाँ हम SharedModule का आयात कर रहे हैं ।

अब प्रतिक्रियाशील रूप के नियंत्रण को निष्क्रिय करने के लिए, हम इसे इस तरह उपयोग कर सकते हैं:

<input type="text" class="form-control" name="userName" formControlName="userName" appDisableControl [disableControl]="disable" />

गलती मैं यह कर रहा था, मैं केवल चयनकर्ता (appDisableControl) का उपयोग कर रहा था और इस के लिए अक्षम परम को पारित कर रहा था। लेकिन एक इनपुट परम को पारित करने के लिए, हमें इसे ऊपर की तरह उपयोग करना होगा।