لا يمكن ربط Angular2 بـ DIRECTIVE لأنه ليس خاصية معروفة للعنصر




typescript (3)

لقد أنشأتDirective جديدًا بواسطة Angular CLI ، تم استيراده إلى 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>

حتى لو كان ضمن التوجيه ، يتم إنشاء رمز Angular CLI فقط:

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

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

 constructor() { }

 }

لقد حصلت على الخطأ:

zone.js: 388 رفض الوعد غير المُعامل: أخطاء تحليل القالب: لا يمكن ربط "appContenteditableModel" نظرًا لأنه ليس خاصية معروفة لـ "p".

جربت كل التغييرات الممكنة تقريبًا ، بعد هذه المستندات الزاويّة ، يجب أن يعمل كل شيء ولكنه لا يعمل.

أي مساعدة؟


إذا كنت تستخدم وحدة نمطية مشتركة لتحديد التوجيه ، فتأكد من أنه تم تصديرها وتصديرها حسب الوحدة النمطية التي تم تعريفها بها.

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

باختصار ، نظرًا لأن التوجيه الخاص بك يشبه توجيه الربط ، قم بإزالة الأقواس وسيعمل.

في الواقع ، لم أجد الأقسام ذات الصلة المتعلقة بموعد إزالة الأقواس أم لا ، حيث يوجد ذكر واحد فقط وجدته في القسم الخاص بالمكونات الديناميكية :

قم بتطبيق ذلك على <ng-template> بدون الأقواس المربعة

، مع ذلك ، لم تتم تغطيته تمامًا في مستند Attribute Directives .

بشكل فردي ، أتفق معك وكنت أفكر في أن [appContenteditableModel] يجب أن يكون مساوياً لـ appContenteditableModel وقد يعمل محلل القالب الزاوي على appContenteditableModel ما إذا كان هناك @input() ربط البيانات أم لا تلقائيًا ، أيضًا. لكن يبدو أنها لا تتم معالجتها بشكل متساوٍ أسفل الغطاء ، حتى في الإصدار الزاوي الحالي 7.


عند التفاف خاصية بين قوسين [] تحاول الربط بها. لذلك عليك أن تعلن أنها @Input .

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

الجزء المهم هو أنه يجب تسمية العضو ( appContenteditableModel ) كخاصية على عقدة DOM (وفي هذه الحالة ، محدد التوجيه).





directive