[解決済み] 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 Unhandled Promise rejection: テンプレートパースエラーです。 appContenteditableModel'は'p'の既知のプロパティではないので、バインドできません。

私はほとんどすべての可能な変更を試して、次のように アンギュラー・ドックス を実行すると、すべてがうまくいくはずなのですが、うまくいきません。

何か良い方法はありませんか？

どのように解決するのですか？

プロパティを括弧で囲む場合 [] で囲むと、それにバインドしようとしていることになります。ですから、それを @Input .

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

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