angular - Angular2 ei voi sitoa DIRECTIVEen, koska se ei ole tunnettu elementin ominaisuus

Loin uuden @Directive-sääntön Angular CLI:llä, se tuotiin app.module.ts-tiedostooni

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

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

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

ja yritän käyttää sitä komponentissani (ChatWindowComponent)

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

vaikka direktiivin sisällä olisi vain Angular CLI:n generoimaa koodia:

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

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

 constructor() { }

 }

Sain virheen:

zone.js:388 Käsittelemätön Promise-hylkäys: Mallin jäsentämisvirheet: Ei voi sitoa 'appContenteditableModel', koska se ei ole tunnettu 'p'-elementin ominaisuus.

Yritin melkein jokaista mahdollista muutosta, seuraamalla näitä Angular-dokumentteja kaiken pitäisi toimia, mutta ei toimi.

Tarvitsetko apua?

Vastaus #1

Kun kiedot ominaisuuden hakasulkeisiin [], yrität sitoutua siihen. Joten sinun täytyy määritellä se @Input-merkinnällä.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

Tärkeä osa on, että jäsenen (appContenteditableModel) tulee nimettyä DOM-solmun ominaisuuden mukaan (ja tässä tapauksessa myös direktiivin valitsimen mukaan).

Vastaus #2

Jos käytät jaettua moduulia määrittääksesi direktiivin, varmista, että se on sekä deklaroitu että viety moduulin toimesta, jossa se on määritelty.

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

Vastaus #3

Minulla oli sama ongelma jaetussa moduulissa määritellyn direktiivin kanssa. Käytän tätä direktiiviä lomakkeen ohjaimen poistamiseen käytöstä.

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

}

Jotta se toimisi oikein, ilmoita ja vie direktiivi jaetussa moduulissa (tai missä tahansa moduulissa, jota käytät).

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

Nyt voimme käyttää tätä direktiiviä missä tahansa moduulissa, johon tuomme SharedModule.

Nyt estääksemme reaktiivisen lomakkeen ohjaimen käytön, voimme käyttää sitä näin:

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

Virheeni oli tehdä se, käytin vain selektoria (appDisableControl) ja välitin tälle disable-parametrin. Mutta syöttöparametrin välittämiseksi meidän täytyy käyttää sitä kuten yllä.

Aiheeseen liittyviä artikkeleita