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>
即使 inside 指令只是 Angular CLI 生成的代码：
import { Directive } from '@angular/core';
@Directive({
selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {
constructor() { }
}
我得到了错误：
zone.js:388 未处理的承诺拒绝：模板解析错误：无法绑定到“appContenteditableModel”，因为它不是“p”的已知属性。
我尝试了几乎所有可能的更改，遵循此 angular docs 一切都应该工作，但它没有。
有什么帮助吗？
[(appContenteditableModel)]="draftMessage.text" 最后...
<p [appContenteditableModel]="draftMessage.text"></p>
appContenteditableModel="draftMessage.text" 的情况下工作，并且 (appContenteditableMode)l="draftMessage.text" 解决了承诺拒绝，但它似乎也没有传递变量
将属性包装在方括号 [] 中时，您试图绑定到它。因此，您必须将其声明为 @Input。
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {
@Input()
appContenteditableModel: string;
constructor() { }
}
重要的部分是，成员 (appContenteditableModel) 需要被命名为 DOM 节点上的属性（在本例中为指令选择器）。
如果您使用共享模块来定义指令，请确保它由定义它的模块声明和导出。
// this is the SHARED module, where you're defining directives to use elsewhere
@NgModule({
imports: [
CommonModule
],
declarations: [NgIfEmptyDirective, SmartImageDirective],
exports: [NgIfEmptyDirective, SmartImageDirective]
})
我在共享模块中声明的指令面临同样的问题。我正在使用这个指令来禁用表单控件。
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）并将禁用参数传递给它。但是要传递输入参数，我们必须像上面一样使用它。
对我来说，修复是将指令引用从根 app.module.ts（import、declarations 和/或 exports 的行）移动到我的组件所属的更具体的模块 src/subapp/subapp.module.ts。
总而言之，因为您的指令看起来像 anchor directive，删除括号，它会工作。
实际上，我还没有找到与何时应该删除括号相关的相应部分，我发现只有一个提及位于 dynamic components 部分：
将其应用于不带方括号的
，但是 Attribute Directives 文档中并未完全涵盖这一点。
就个人而言，我同意您的看法，并且认为 [appContenteditableModel] 应该等于 appContenteditableModel，并且角度模板解析器也可能会自动解决是否存在 @input() 数据绑定。但即使在当前的 Angular 版本 7 中，它们似乎也没有在底层得到同等处理。
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅相似问题
- 例外：无法绑定到“ngFor”，因为它不是已知的本机属性
- Angular2 异常：无法绑定到“routerLink”，因为它不是已知的本机属性
- 角度异常：无法绑定到“ngForIn”，因为它不是已知的本机属性
- 无法绑定到“ngModel”，因为它不是“输入”的已知属性
- 无法绑定到“formGroup”，因为它不是“form”的已知属性
- 无法绑定到“routerLink”，因为它不是已知属性
- 无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题
- 角度错误：“无法绑定到‘ngModel’，因为它不是‘输入’的已知属性”
@Input ('appContenteditableModel') model : any;并输出了@Output ('appContenteditableModel') update : EventEmitter<any> = new EventEmitter();。看起来模型运行良好，但this.update.emit(value)调用的发射器不会更改父组件中的值。我做错了什么？[(appContenteditableModel)]="draftMessage.text"@Output仅用于发出事件。如果您想使值与父值保持同步，您可以考虑添加@HostBinding注释。@HostBinding将有助于使值在 html 元素中保持同步，对吗？我需要由用户contenteditable="true"编辑此元素，以便我需要与同一组件中的变量保持同步。selector: 'fooDirective'）与@Input()属性名称（例如@Input() barDirective）不匹配。我重命名了选择器，但也没有考虑属性。