Angular2 DIRECTIVE এর সাথে আবদ্ধ হতে পারে না কারণ এটি উপাদানটির একটি পরিচিত সম্পত্তি নয়

Question 1

আমি কৌনিক সিএলআই দ্বারা নতুন @ ডিরেক্টরটিভ তৈরি করেছি, এটি আমার অ্যাপ্লিকেশন

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

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

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

এবং আমি আমার উপাদান (চ্যাট উইন্ডো কম্পোনেন্ট) ব্যবহার করার চেষ্টা করি

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

এমনকি যদি নির্দেশের মধ্যে কেবল কৌনিক সিএলআই উত্পন্ন কোড থাকে:

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

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

 constructor() { }

 }

আমি ত্রুটি পেয়েছি:

অঞ্চল.js: 388 হাতছাড়া প্রতিশ্রুতি প্রত্যাখ্যান: টেমপ্লেট বিশ্লেষণ ত্রুটি: 'অ্যাপকন্টেনটেটেবলমোডেল' এর সাথে আবদ্ধ হতে পারে না কারণ এটি 'পি' এর পরিচিত সম্পত্তি নয়।

আমি প্রায় প্রতিটি সম্ভাব্য পরিবর্তনের চেষ্টা করেছি, এই কৌনিক ডক্স অনুসরণ করে সবকিছুই কাজ করা উচিত তবে তা কার্যকর হয় না।

কোন সাহায্য?

Question 2

যখন কোনও সম্পত্তি বন্ধনীতে মোড়ানো হয় []আপনি তার সাথে আবদ্ধ হওয়ার চেষ্টা করছেন। সুতরাং আপনি এটি হিসাবে ঘোষণা করতে হবে @Input।

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

গুরুত্বপূর্ণ অংশটি হ'ল, সদস্য ( appContenteditableModel) এর DOM নোডের সম্পত্তি হিসাবে নামকরণ করা প্রয়োজন (এবং এই ক্ষেত্রে, নির্দেশিকা নির্বাচক)।

Question 3

আপনি যদি নির্দেশকে সংজ্ঞায়িত করতে একটি ভাগ করা মডিউল ব্যবহার করেন তবে এটি নির্ধারণ করা মডিউল দ্বারা এটি ঘোষিত ও রফতানি করা হয়েছে কিনা তা নিশ্চিত করুন।

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

Question 4

আমার জন্য ফিক্স রুট থেকে নির্দেশ রেফারেন্স চলন্ত ছিল app.module.ts(লাইন জন্য import, declarationsএবং / অথবা exportsআরো নির্দিষ্ট মডিউল করার জন্য) src/subapp/subapp.module.tsআমার কম্পোনেন্ট থেকে belonged।

Question 5

সংক্ষেপে, যেহেতু আপনার নির্দেশটি অ্যাঙ্কর নির্দেশকের মতো দেখাচ্ছে , বন্ধনীগুলি সরিয়ে ফেলুন এবং এটি কার্যকর হবে।

প্রকৃতপক্ষে, যখন বন্ধনীগুলি অপসারণ করা উচিত বা না করা উচিত তার সাথে সম্পর্কিত বিভাগগুলি আমি খুঁজে পাইনি, যেখানে আমি কেবল একটি উল্লেখ খুঁজে পেয়েছি গতিশীল উপাদানগুলির অংশে অবস্থিত :

বর্গাকার বন্ধনী ছাড়াই এটি প্রয়োগ করুন<ng-template>

যা অ্যাট্রিবিউট ডাইরেক্টিভগুলিতে পুরোপুরি আচ্ছাদিত নয় ডকুমেন্টে ।

স্বতন্ত্রভাবে, আমি আপনার সাথে একমত হয়েছি এবং ভেবেছিলাম যে [appContenteditableModel]সমান হওয়া উচিত appContenteditableModelএবং কৌনিক টেম্পলেট পার্সার @input()পাশাপাশি ডেটা বন্ডিং রয়েছে কিনা তাও চারপাশে কাজ করতে পারে । তবে তারা 7 এর বর্তমান কৌণিক সংস্করণেও হুডের নীচে সমানভাবে প্রক্রিয়াজাত নয় বলে মনে হয়।

Question 6

আমি একই সমস্যার মুখোমুখি হয়েছি একটি ভাগ করা মডিউলে ঘোষিত একটি নির্দেশ নিয়ে। আমি ফর্ম নিয়ন্ত্রণ অক্ষম করতে এই নির্দেশিকাটি ব্যবহার করছি।

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" />

ভুলটি আমি এটি করছিলাম, আমি কেবলমাত্র নির্বাচক (অ্যাপডিজিয়েবল কনট্রোল) ব্যবহার করছিলাম এবং এটিতে অক্ষম প্যারামটি পাস করছিলাম। তবে একটি ইনপুট প্যারাম পাস করতে আমাদের উপরের মতো এটি ব্যবহার করতে হবে।