Angular2 Невозможно связываться с DIRECTIVE, так как это не известное свойство элемента

Я создал новый @Directive с помощью Angular CLI, он был импортирован в мой 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".

Я пробовал практически все возможные изменения, следуя этим angular docs, все должно работать, но это не так.

Любая помощь?

Ответы

Ответ 1

При переносе свойства в скобки [] вы пытаетесь привязать его. Поэтому вы должны объявить его как @Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

Важная часть состоит в том, что член (appContenteditableModel) должен быть назван как свойство в DOM node (и в этом случае селектором директивы).

Ответ 2

Если вы используете общий модуль для определения директивы, убедитесь, что она объявлена и экспортирована модулем, в котором она определена.

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

Ответ 3

Для меня исправление перемещало ссылки директивы из корневого app.module.ts (строки для import, declarations и/или exports) в более конкретный модуль src/subapp/subapp.module.ts принадлежал мой компонент.

Ответ 4

В итоге, поскольку ваша директива выглядит как директива привязки, удалите скобки, и она будет работать.

На самом деле, я не нашел соответствующих разделов, связанных с тем, когда скобки должны быть удалены или нет, где только одно упоминание, которое я нашел, находится в разделе о динамических компонентах:

Примените это к <ng-template> без квадратных скобок

что, однако, не совсем отражено в документе " Директивы атрибутов".

По отдельности я согласен с вами и думал, что [appContenteditableModel] должен быть равен appContenteditableModel и анализатор угловых шаблонов может работать независимо от того, существует ли @input() данных @input() или нет автоматически. Но они кажутся точно не обработанными одинаково под капотом, даже в текущей версии Angular 7.