Angular2 Kann nicht an DIRECTIVE gebunden werden, da es keine bekannte Eigenschaft des Elements ist

Ich habe neues @Directive von Angular CLI generiert und es 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, 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 bekommen:

zone.js: 388 Nicht behandelte Ablehnung von Versprechungen: Fehler beim Analysieren von Vorlagen: Kann nicht an 'appContenteditableModel' gebunden werden, da dies keine bekannte Eigenschaft von 'p' ist.

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

Irgendeine Hilfe?

Wenn Sie eine Eigenschaft in Klammern setzen [], versuchen Sie, sie zu binden. Sie müssen es also als deklarieren @Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

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

Wenn Sie ein gemeinsam genutztes Modul zum Definieren der Direktive verwenden, stellen Sie sicher, dass es von dem Modul, in dem es definiert ist, 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]
})

Für mich war die Update Bezugnahme auf die Richtlinie von der Wurzel zu bewegen app.module.ts(die Leitungen für import, declarationsund / oder exports) den spezielleren Modulsrc/subapp/subapp.module.ts meiner Komponente gehörte.

In der Summe, weil 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 im Abschnitt über dynamische Komponenten befindet :

Wenden Sie das <ng-template> ohne die eckigen Klammern an

, was jedoch im Dokument Attributrichtlinien nicht perfekt behandelt wird .

Individuell stimme ich Ihnen zu und war der Meinung, dass der Parser [appContenteditableModel]für appContenteditableModeleckige Vorlagen gleich sein sollte, um zu umgehen, ob @input()Daten automatisch gebunden werden oder nicht. Aber sie scheinen unter der Haube nicht gleich verarbeitet zu sein, selbst in der aktuellen Angular-Version von 7.

Ich hatte das gleiche Problem mit einer Direktive, die in einem gemeinsam genutzten Modul deklariert wurde. Ich verwende diese Anweisung, um ein Formularsteuerelement zu deaktivieren.

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]();
  }

}

Um es richtig zu machen, deklarieren und exportieren Sie die Direktive in einem gemeinsam genutzten Modul (oder einem beliebigen Modul, das Sie verwenden).

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

Jetzt können wir diese Direktive in jedem Modul verwenden, in das wir SharedModule importieren .

Um die Steuerung einer reaktiven Form zu deaktivieren, können wir sie folgendermaßen verwenden:

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

Fehler Ich habe es getan, ich habe nur den Selektor (appDisableControl) verwendet und den Deaktivierungsparameter an diesen übergeben. Um einen Eingabeparameter zu übergeben, müssen wir ihn wie oben verwenden.