estructurales - Angular2 no se puede unir a DIRECTIVE ya que no es una propiedad conocida del elemento

directivas estructurales angular

Question

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 solo hay código Angular CLI generado:

 import { Directive } from ''@angular/core'';
@Directive({
selector: ''[appContenteditableModel]''
})
export class ContenteditableModelDirective {
constructor() { }
}

Recibí el error:

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

Intenté casi todos los cambios posibles, siguiendo estos documentos angulares, todo debería funcionar, pero no funciona.

¿Alguna ayuda?

Answer 1

Al ajustar una propiedad entre corchetes [] , está intentando vincularla. Entonces debes 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).

Answer 2

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 se deben quitar o no los corchetes, donde solo una mención que he encontrado se encuentra en la sección de componentes dinámicos :

Aplique eso a <ng-template> sin los corchetes

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

Individualmente, estoy de acuerdo con usted y estaba pensando que [appContenteditableModel] debería ser igual a appContenteditableModel y el analizador de plantillas angulares podría @input() si existe enlace de datos @input() o no automáticamente, también. Pero parece que no se procesan exactamente igual, incluso en la versión angular actual de 7.

Answer 3

Para mí, la solución fue trasladar las referencias de la directiva desde la raíz app.module.ts (las líneas para import , declarations y / o exports ) al módulo más específico src/subapp/subapp.module.ts que pertenecía mi componente.

Answer 4

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