Angular2는 요소의 내부 속성이 아니므로 바인딩 할 수 없습니다.

Angular2는 요소의 내부 속성이 아니므로 바인딩 할 수 없습니다.

---

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'에 바인딩 할 수 없습니다.

이 각도 문서에 따라 모든 가능한 변경 사항을 시도했지만 모든 것이 작동하지만 작동하지 않습니다.

도움이 필요하세요?

---

속성을 괄호 []로 묶을 때 바인딩합니다. 그래서 당신은 그것을 @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]
})

---

요컨대, 지시문이 앵커 지시문 처럼 보이기 때문에 대괄호를 제거하면 작동합니다.

실제로 괄호를 제거해야하는시기와 관련된 해당 섹션을 찾지 못했습니다. 동적 구성 요소 에 대한 섹션에 내가 찾은 멘션이 하나뿐입니다 .

대괄호없이 적용<ng-template>

그러나 이는 속성 지시문 문서 에서 완벽하게 다루지 않습니다 .

개별적으로, 나는 당신과 함께 동의하고 그 생각 [appContenteditableModel]에 동일해야 appContenteditableModel각 템플릿 파서가 있는지를 해결할 수 있으며 @input()뿐만 아니라, 자동으로 데이터 바인딩 여부. 그러나 현재 Angular 버전 7에서도 후드에서 똑같이 처리되지 않은 것 같습니다.

---

나를 위해 수정이 루트에서 지침 참조 움직이고 있었다 app.module.ts(라인에 대한 import, declarations및 / 또는 exports보다 구체적인 모듈) src/subapp/subapp.module.ts내 구성 요소가 소유합니다.

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