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

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

도움이 필요하세요?

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

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

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

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

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

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

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

공유 모듈에서 선언 된 지시문과 동일한 문제에 직면했습니다. 이 지시문을 사용하여 양식 컨트롤을 비활성화합니다.

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) 만 사용하고 비활성화 매개 변수를 이것에 전달했습니다. 그러나 입력 매개 변수를 전달하려면 위와 같이 사용해야합니다.