Angular2 no se puede enlazar a DIRECTIVE ya que no es una propiedad conocida del elemento

Genere un nuevo @Directive por Angular CLI, lo importé a mi app.module.ts

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

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

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

y trato de usar en mi componente (ChatWindowComponent)

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

incluso si dentro de la directiva es solo código generado por CLI angular:

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

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

 constructor() { }

 }

Me sale el error:

zone.js: 388 Rechazo de promesa no controlada: Errores de análisis de plantilla: no se puede vincular a 'appContenteditableModel' porque no es una propiedad conocida de 'p'.

Probé casi todos los cambios posibles, siguiendo estos documentos angulares, todo debería funcionar, pero no es así.

¿Alguna ayuda?

Al envolver una propiedad entre corchetes [], intenta vincularla. Entonces tienes que declararlo como @Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

La parte importante es que el miembro ( appContenteditableModel) necesita ser nombrado como la propiedad en el nodo DOM (y, en este caso, el selector de directivas).

Si está utilizando un módulo compartido para definir la directiva, asegúrese de que sea declarado y exportado por el módulo en el que está definido.

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

Para mí, la solución se movía referencias de la Directiva de la raíz app.module.ts(para las líneas import, declarationsy / o exports) al módulo más específico src/subapp/subapp.module.tsmi componente pertenecía.

En resumen, debido a que su directiva parece una directiva de anclaje , elimine los corchetes y funcionaría.

En realidad, no he encontrado las secciones correspondientes relacionadas con cuándo deben eliminarse los corchetes o no, donde solo una mención que encontré se encuentra en la sección de componentes dinámicos :

Aplicar eso <ng-template> sin los corchetes

, que sin embargo no está perfectamente cubierto en las Directivas de atributos documento de .

Individualmente, estoy de acuerdo con usted y estaba pensando que [appContenteditableModel]debería ser igual a, appContenteditableModely el analizador de plantilla angular también podría solucionar si hay @input()enlace de datos o no automáticamente. Pero parecen exactamente no procesados ​​igualmente bajo el capó, incluso en la Versión Angular actual de 7.

Estaba enfrentando el mismo problema con una directiva declarada en un módulo compartido. Estoy usando esta directiva para deshabilitar un control de formulario.

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

}

Para que funcione correctamente, declare y exporte la directiva en un módulo compartido (o cualquier módulo que esté utilizando).

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

Ahora podemos usar esta directiva en cualquier módulo donde estemos importando SharedModule .

Ahora, para deshabilitar el control de un formulario reactivo, podemos usarlo así:

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

Error: lo estaba haciendo, estaba usando solo el selector (appDisableControl) y pasando el parámetro de desactivación a esto. pero para pasar un parámetro de entrada, tenemos que usarlo como arriba.