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