web-dev-qa-db-ja.com

Angular2は要素の既知のプロパティではないため、DIRECTIVEにバインドできません

Angular CLIで新しい@Directiveを生成し、app.module.tsにインポートしました

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

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

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

私は自分のコンポーネント（ChatWindowComponent）で使用しようとします

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

ディレクティブがAngular CLI生成コードのみの場合でも：

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

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

 constructor() { }

 }

エラーが発生しました：

zone.js：388未処理のプロミス拒否：テンプレート解析エラー：「p」の既知のプロパティではないため、「appContenteditableModel」にバインドできません。

私はこれに続いて、ほとんどすべての可能な変更を試みました angular docs すべてが動作するはずですが、動作しません。

助けがありますか？

angulartypescriptdirective
57
Tomas Javurek

プロパティを角かっこ[]でラップすると、バインドしようとしています。したがって、それを@Inputとして宣言する必要があります。

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

重要な部分は、メンバー（appContenteditableModel）がDOMノード（および、この場合、ディレクティブセレクター）のプロパティとして名前を付けられる必要があるということです。

95
naeramarth7

共有モジュールを使用してディレクティブを定義している場合は、定義されているモジュールによって宣言およびエクスポートされていることを確認してください。

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

要するに、ディレクティブは anchor directive のように見えるので、括弧を削除すれば機能します。

実際、ブラケットを削除すべきかどうかに関連するセクションは見つかりませんでした。見つけたのは、 dynamic components のセクションにある1つの言及だけです。

角括弧なしで<ng-template>に適用します

、ただし、 属性ディレクティブ ドキュメントでは完全にカバーされていません。

個人的には、[appContenteditableModel]はappContenteditableModelに等しく、angularテンプレートパーサーは@input()データバインディングがあるかどうかにかかわらず自動的に回避できると考えていました。しかし、現在のAngularバージョン7でも、それらはまったく同じように処理されていないようです。

1
千木郷

私にとっては、修正はディレクティブ参照をルートapp.module.ts（import、declarations、および/またはexportsの行）から、コンポーネントが属する特定のモジュールsrc/subapp/subapp.module.tsに移動することでした。

0
SushiGuy