Angular2 Tidak dapat mengikat ke DIRECTIVE karena ini bukan properti elemen yang diketahui

Saya membuat @Directive baru oleh Angular CLI, itu diimpor ke app.module.ts saya

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

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

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

dan saya mencoba menggunakan di komponen saya (ChatWindowComponent)

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

bahkan jika dalam direktif hanya kode CLI Angular yang dihasilkan:

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

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

 constructor() { }

 }

Saya mendapat kesalahan:

zone.js: 388 Penolakan Janji Tak Tertangani: Kesalahan penguraian template: Tidak dapat mengikat ke 'appContenteditableModel' karena ini bukan properti yang dikenal dari 'p'.

Saya mencoba hampir setiap perubahan yang mungkin, mengikuti dokumen sudut ini semuanya harus berfungsi tetapi tidak.

Ada bantuan?

Saat membungkus properti dalam tanda kurung, []Anda mencoba mengikatnya. Jadi, Anda harus mendeklarasikannya sebagai file @Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

Bagian yang penting adalah, bahwa anggota ( appContenteditableModel) perlu dinamai sebagai properti pada simpul DOM (dan, dalam hal ini, pemilih direktif).

Jika Anda menggunakan modul bersama untuk menentukan direktif, pastikan itu dideklarasikan dan diekspor oleh modul yang ditentukan di dalamnya.

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

Bagi saya memperbaiki itu bergerak referensi direktif dari akar app.module.ts(garis untuk import, declarationsdan / atau exports) ke modul yang lebih spesifik src/subapp/subapp.module.tskomponen saya milik.

Singkatnya, karena arahan Anda terlihat seperti arahan jangkar , hapus tanda kurung dan itu akan berhasil.

Sebenarnya, saya belum menemukan bagian yang sesuai terkait kapan tanda kurung harus dilepas atau tidak, di mana hanya satu penyebutan yang saya temukan terletak di bagian komponen dinamis :

Terapkan itu ke <ng-template> tanpa tanda kurung siku

, yang bagaimanapun tidak tercakup secara sempurna dalam Atribut Directive dokumen .

Secara individu, saya setuju dengan Anda dan berpikir itu [appContenteditableModel]harus sama dengan appContenteditableModeldan parser template sudut mungkin bekerja di sekitar apakah ada @input()data yang mengikat atau tidak secara otomatis, juga. Tapi mereka tampaknya benar-benar tidak diproses dengan sama di bawah tenda, bahkan dalam Versi Angular 7 saat ini.

Saya menghadapi masalah yang sama dengan arahan yang dideklarasikan dalam modul bersama. Saya menggunakan arahan ini untuk menonaktifkan kontrol formulir.

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

}

Untuk bekerja dengan benar, deklarasikan dan ekspor direktif dalam modul bersama (atau modul apa pun yang Anda gunakan).

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

Sekarang kita dapat menggunakan arahan ini di modul mana pun tempat kita mengimpor SharedModule .

Sekarang untuk menonaktifkan kontrol formulir reaktif, kita dapat menggunakannya seperti ini:

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

Kesalahan saya melakukannya, saya hanya menggunakan selector (appDisableControl) dan meneruskan parameter disable ke ini. tetapi untuk mengirimkan parameter masukan, kita harus menggunakannya seperti di atas.