Angular2 DIRECTION은 요소의 알려진 속성이 아니므로 바인딩할 수 없습니다.

Angular2 DIRECTION은 요소의 알려진 속성이 아니므로 바인딩할 수 없습니다.

새로운 @Directive by Angular CLI를 생성했는데 app.modulets로 Import 되었습니다.

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

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

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

컴포넌트(Chat Window Component)에서 사용하려고 합니다.

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

디렉티브 내에 Angular CLI 생성 코드만 있는 경우:

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

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

 constructor() { }

 }

에러가 발생했습니다.

zone.js:388 처리되지 않은 약속 거부:템플릿 구문 분석 오류: 'appContentableModel'은 'p'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

가능한 거의 모든 변경을 시도했지만, 이 각진 문서에 따라 모든 것이 작동해야 하지만 작동하지 않습니다.

도움이 필요하신가요?

속성을 대괄호로 묶는 경우[]결속하려고 하는 거겠죠그래서 당신은 그것을 선언해야 한다.@Input.

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

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

  @Input()
  appContenteditableModel: string;

  constructor() { }

}

중요한 건 멤버가appContenteditableModel)는, DOM 노드(이 경우는 디렉티브실렉터)의 속성으로서 지정할 필요가 있습니다.

공유 모듈을 사용하여 디렉티브를 정의하는 경우 디렉티브가 에서 정의된 모듈에 의해 선언되고 내보내기되었는지 확인합니다.

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

공유 모듈에서 선언된 지침에 대해서도 같은 문제에 직면해 있었습니다.폼 컨트롤을 비활성화하기 위해 이 명령을 사용합니다.

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

이제 Shared Module을 Import하는 모든 모듈에서 이 디렉티브를 사용할 수 있습니다.

이제 반응형 폼의 제어를 비활성화하려면 다음과 같이 사용할 수 있습니다.

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

실수로 셀렉터(appDisableControl)만 사용하여 disable param을 전달했는데 입력 파라미터를 전달하려면 위와 같이 사용해야 합니다.

나에게 수정은 지시 참조를 루트에서 이동시키는 것이었다.app.module.ts(의 행import,declarations, 및/또는exports)를 보다 구체적인 모듈로 전송합니다.src/subapp/subapp.module.ts내 컴포넌트가 속해있었어

즉, 지시문이 앵커 지시문처럼 보이므로 괄호를 제거하면 작동합니다.

실제로 브래킷을 분리해야 하는 시기와 관련된 섹션은 찾을 수 없습니다.다이나믹 컴포넌트에 관한 섹션은 1개뿐입니다.

그것을 에 적용하다<ng-template> 대괄호 없이

단, Attribute Directives 문서에서는 완전히 다루지 않습니다.

.[appContenteditableModel]와 동등해야 한다appContenteditableModel는 angular template parser가 에 따라 할 수 .@input()데이터 바인딩 또는 자동 바인딩이 아닌 경우에도 마찬가지입니다.그러나 현재 Angular Version 7에서도 보닛 아래에서 동일하게 처리되지 않은 것으로 보입니다.

언급URL : https://stackoverflow.com/questions/40705819/angular2-cant-bind-to-directive-since-it-isnt-a-known-property-of-element