Angular2无法绑定到DIRECTIVE，因为它不是element的已知属性

Question 1

我通过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未处理的承诺拒绝：模板解析错误：由于它不是'p'的已知属性，因此无法绑定到'appContenteditableModel'。

我尝试了几乎所有可能的更改，按照这个有角度的文档，一切都应该起作用，但事实并非如此。

有什么帮助吗？

Question 2

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

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

重要的部分是，成员（appContenteditableModel）必须被命名为DOM节点（在这种情况下为指令选择器）上的属性。

Question 3

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

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

Question 4

对于我修复正从根指令引用app.module.ts（线对import，declarations和/或exports），以更具体的模块src/subapp/subapp.module.ts我的组件属于。

Question 5

总而言之，由于您的指令看起来像锚指令，因此删除括号即可。

实际上，我还没有找到与何时应该删除括号有关的相应部分，我在动态组件部分仅找到一处提及：

将其应用于<ng-template> 不带方括号的

，但是在“属性指令”文档中并未完全涵盖。

我个人同意您的想法，并认为[appContenteditableModel]应该等于appContenteditableModel并且角度模板解析器也可能会@input()自动解决是否存在数据绑定问题。但是，即使在当前的Angular版本7中，它们似乎也无法在后台进行同样的处理。

Question 6

我在共享模块中声明的指令也面临着同样的问题。我正在使用此指令禁用表单控件。

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

现在，我们可以在导入SharedModule的任何模块中使用此指令。

现在要禁用反应形式的控件，我们可以像这样使用它：

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

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