wake-up-neo.com

Angular2 Kann nicht an DIRECTIVE binden, da es keine bekannte Eigenschaft von element ist

Ich habe die neue @Directive von Angular CLI generiert, sie wurde in meine app.module.ts importiert

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

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

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

und ich versuche es in meiner Komponente (ChatWindowComponent) zu verwenden

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

auch wenn innerhalb der Direktive nur Angular CLI Code generiert wird: 

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

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

 constructor() { }

 }

Ich habe den Fehler erhalten: 

zone.js: 388 Unhandled Versprechen-Ablehnung: Fehler bei der Vorlagenanalyse: Kann nicht an 'appContenteditableModel' gebunden werden, da es keine bekannte Eigenschaft von 'p' ist.

Ich habe fast alle möglichen Änderungen ausprobiert, nach diesem eckigen Dokumenten alles sollte funktionieren, aber es funktioniert nicht. 

Irgendeine Hilfe?

angulartypescriptdirective
50
Tomas Javurek

Beim Umschließen einer Eigenschaft in Klammern [] versuchen Sie, sich daran zu binden. Sie müssen es also als @Input deklarieren.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

Der wichtige Teil ist, dass der Member (appContenteditableModel) als Eigenschaft auf dem DOM-Knoten (und in diesem Fall der Direktive-Selektor) benannt werden muss.

87
naeramarth7

Wenn Sie ein gemeinsam genutztes Modul zum Definieren der Direktive verwenden, stellen Sie sicher, dass es von Modul deklariert und exportiert wird.

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

Kurz gesagt, da Ihre Direktive wie eine Anker Direktive aussieht, entfernen Sie die Klammern und es würde funktionieren.

Tatsächlich habe ich die entsprechenden Abschnitte nicht gefunden, die sich darauf beziehen, wann die Klammern entfernt werden sollen oder nicht, wobei sich nur eine Erwähnung, die ich gefunden habe, im Abschnitt über dynamische Komponenten befindet:

Wende das auf <ng-template> an ohne die eckigen Klammern

, was jedoch in den Attribute Directives document nicht perfekt abgedeckt ist.

Individuell stimme ich Ihnen zu und war der Meinung, dass [appContenteditableModel] gleich appContenteditableModel sein sollte, und der Parser für eckige Vorlagen könnte möglicherweise umgehen, ob es @input() Datenbindung gibt oder nicht. Aber sie scheinen unter der Haube auch in der aktuellen Angular Version von 7 genau nicht gleich verarbeitet zu sein.

1
千木郷

Für mich lag der Fix darin, die Direktive-Referenzen von root app.module.ts (die Zeilen für import, declarations und/oder exports) in das spezifischere Modul src/subapp/subapp.module.ts zu verschieben, zu dem meine Komponente gehörte.

0
SushiGuy