Angular2 Impossible de se lier à DIRECTIVE car il ne s'agit pas d'une propriété connue de l'élément.

Question

J'ai généré un nouveau @Directive Angulaire de la CLI, il a été importé à mon application.le module.ts

import { ContenteditableModelDirective } from './directives/contenteditable-model.directive';

import { ChatWindowComponent } from './chat-window/chat-window.component';

@NgModule({
  declarations: [
    AppComponent,
    ContenteditableModelDirective,
    ChatWindowComponent,
    ...
  ],
  imports: [
    ...
  ],
  ...
})

et j'essaie de l'utiliser dans mon composant (ChatWindowComponent)

<p [appContenteditableModel] >
    Write message
</p>

même si au sein de la directive est seulement Angulaire de la CLI code généré:

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

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

 constructor() { }

 }

J'ai obtenu l'erreur:

la zone.js:388 non Gérée Promesse de rejet: Modèle erreurs d'analyse: Ne peut pas se lier à 'appContenteditableModel', car il n'est pas connu de la propriété de 'p'.

J'ai essayé presque tous les changements possibles à la suite de cette angulaire docs , tout devrait fonctionner, mais il ne le fait pas.

Toute aide?

Answer 1

Lorsque vous mettez une propriété entre crochets [] vous essayez de vous y lier. Vous devez donc le déclarer comme @Input .

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}
 

La partie importante est que le membre ( appContenteditableModel ) doit être nommé en tant que propriété du noeud DOM (et, dans ce cas, du sélecteur de directive).

Answer 2

Si vous utilisez un module partagé pour définir la directive, assurez-vous qu’elle est à la fois déclarée et exportée par le module dans lequel elle est définie.

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

Answer 3

Pour moi, le correctif consistait à déplacer les références de directive de la racine app.module.ts (les lignes de import , declarations et / ou exports ) à le module plus spécifique src/subapp/subapp.module.ts auquel mon composant appartenait.