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

Question 1

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>

ディレクティブ内がAngularCLIで生成されたコードのみである場合でも：

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

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

 constructor() { }

 }

エラーが発生しました：

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

この角度のあるドキュメントに従って、ほぼすべての可能な変更を試しましたが、すべてが機能するはずですが、機能しません。

何か助けはありますか？

Question 2

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

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

重要なのは、メンバー（appContenteditableModel）をDOMノード（この場合はディレクティブセレクター）のプロパティとして指定する必要があるということです。

Question 3

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

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

Question 4

私にとってこの修正は、ルートからの指示参照動いていたapp.module.ts（ラインのためimport、declarationsおよび/またはexports複数の特定のモジュールに）src/subapp/subapp.module.ts私のコンポーネントはに属しています。

Question 5

要するに、あなたの指令はアンカーディレクティブの、角かっこを削除すると機能します。

実際、ブラケットを削除する必要があるかどうかに関連する対応するセクションは見つかりませんでした。動的コンポーネントのセクションに記載されているのは1つだけです。

角括弧なしでそれを適用し<ng-template> ます

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

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

Question 6

共有モジュールで宣言されたディレクティブで同じ問題に直面していました。このディレクティブを使用して、フォームコントロールを無効にしています。

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

}

正しく機能させるには、共有モジュール（または使用しているモジュール）でディレクティブを宣言してエクスポートします。

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

これで、SharedModuleをインポートする任意のモジュールでこのディレクティブを使用できます。

ここで、リアクティブフォームの制御を無効にするには、次のように使用できます。

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

間違い私はそれをやっていた、私はセレクター（appDisableControl）だけを使用していて、これに無効化パラメーターを渡していた。ただし、入力パラメータを渡すには、上記のように使用する必要があります。