Angular2, elemanın bilinen bir özelliği olmadığı için DIRECTIVE'e bağlanamaz

Angular CLI tarafından yeni @Directive oluşturdum, onu app.module.ts'ime aktarıldı

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

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

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

ve bileşenimde kullanmaya çalışıyorum (ChatWindowComponent)

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

direktif içinde sadece Angular CLI tarafından üretilen kod olsa bile:

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

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

 constructor() { }

 }

Hatayı aldım:

zone.js: 388 İşlenmemiş Söz reddi: Şablon ayrıştırma hataları: "p" nin bilinen bir özelliği olmadığı için "appContenteditableModel" e bağlanılamıyor.

Bu açısal belgeleri takiben hemen hemen her olası değişikliği denedim, her şey çalışmalı ama olmuyor.

Herhangi bir yardım?

Bir özelliği parantez içine []alırken ona bağlamaya çalışıyorsunuz. Yani bunu bir @Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

Önemli olan, üye ( appContenteditableModel) 'nin DOM düğümündeki özellik (ve bu durumda, yönerge seçicisi) olarak adlandırılması gerektiğidir.

Yönergeyi tanımlamak için paylaşılan bir modül kullanıyorsanız, bunun içinde tanımlandığı modül tarafından hem bildirildiğinden hem de dışa aktarıldığından emin olun.

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

Benim için düzeltme, yönerge referanslarını kökten taşımaktı app.module.ts (çizgiler için import, declarationsve / veya exportsdaha spesifik modülüne) src/subapp/subapp.module.tsbenim bileşeni aitti.

Özetle, direktifiniz bir çapa direktifine benzediği için , köşeli parantezleri kaldırın ve işe yarayacaktır.

Aslında, parantezlerin ne zaman kaldırılması gerektiğiyle ilgili ilgili bölümleri bulamadım, burada dinamik bileşenlerle ilgili bölümde bulduğum tek bir söz var :

Bunu köşeli parantezler olmadan uygulayın<ng-template>

, ancak bu, Nitelik Direktiflerinde tam olarak kapsanmamaktadır belgesinde .

Bireysel olarak, sizinle aynı fikirdeyim ve [appContenteditableModel]bunun eşit olması gerektiğini düşünüyordum appContenteditableModelve açısal şablon ayrıştırıcı, @input()veri bağlamanın otomatik olarak olup olmadığı konusunda da işe yarayabilir . Ancak, mevcut 7'nin Angular Versiyonunda bile, tam olarak başlık altında eşit olarak işlenmemiş gibi görünüyorlar.

Paylaşılan bir modülde açıklanan bir yönerge ile aynı sorunla karşılaşıyordum. Bir form denetimini devre dışı bırakmak için bu yönergeyi kullanıyorum.

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

}

Düzgün çalışması için, yönergeyi paylaşılan modülde (veya kullandığınız herhangi bir modülde) açıklayın ve dışa aktarın.

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

Artık bu yönergeyi SharedModule'u içe aktardığımız her modülde kullanabiliriz .

Şimdi reaktif bir formun kontrolünü devre dışı bırakmak için bunu şu şekilde kullanabiliriz:

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

Hata yapıyordum, sadece seçici (appDisableControl) kullanıyordum ve devre dışı bırakma parametresini buna geçiriyordum. ancak bir girdi parametresini geçmek için yukarıdaki gibi kullanmalıyız.