Angular2无法绑定到指令，因为它不是元素的已知属性

Question

我生成了新的@Directive角CLI,

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拒绝：模板解析错误：无法绑定到“appContenteditableModel”，因为它不是“p”的已知属性。

我尝试了几乎所有可能的变化,t

有帮助吗？

Answer 1

我在共享模块中声明的指令时遇到了同样的问题。我正在使用此指令禁用窗体控件。

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 { }

现在我们可以使用这个指令在任何模块

<input type="text" class="form-control" name="userName" formControlName="userName" appDisableControl [disableControl]="disable" />

错误的是，我只使用了选择器(appDisableControl)并将禁用参数传递给了它。但是要传递一个输入参数，我们必须像上面这样使用它。

Answer 2

如果使用共享模块来定义指令，请确保该指令由其定义的模块声明和导出。

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

Answer 3

将属性括在方括号 [] 中时，您正在尝试绑定到它。因此，您必须将其声明为@Input。

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

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