☰

Angular2は要素の既知のプロパティではないため、DIRECTIVEにバインドできません質問する

tag-icon • tag-icon angular typescript directive
Angular2は要素の既知のプロパティではないため、DIRECTIVEにバインドできません質問する

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>

ディレクティブ内に Angular CLI で生成されたコードのみが含まれている場合でも、

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

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

 constructor() { }

 }

次のエラーが発生しました:

zone.js:388 未処理の Promise 拒否: テンプレート解析エラー: 'p' の既知のプロパティではないため、'appContenteditableModel' にバインドできません。

私はほぼあらゆる変更を試みたが、角度ドキュメントすべてが機能するはずですが、機能しません。

何か助けて？

ベストアンサー1

プロパティを括弧で囲むと、[]そのプロパティにバインドしようとします。したがって、プロパティを として宣言する必要があります@Input。

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

重要なのは、メンバー ( appContenteditableModel) を DOM ノード (この場合はディレクティブ セレクター) のプロパティとして命名する必要があることです。

おすすめ記事