Angular2 无法绑定(bind)到 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>

即使 within 指令只是 Angular CLI 生成的代码:

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

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

 constructor() { }

 }

我得到了错误:

zone.js:388 未处理的 Promise 拒绝:模板解析错误: 无法绑定(bind)到“appContenteditableModel”，因为它不是“p”的已知属性。

我尝试了几乎所有可能的更改，遵循此 angular docs一切都应该有效，但事实并非如此。

有什么帮助吗？

Answer 1

当用方括号 [] 包裹一个属性时，您正试图绑定(bind)到它。因此，您必须将其声明为 @Input。

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

重要的是，成员 (appContenteditableModel) 需要命名为 DOM 节点上的属性(在本例中，是指令选择器)。