내 응용 프로그램에서 부울 구성 요소 속성을 사용하여 입력 필드를 표시하거나 숨기는 단추를 배치하려고했습니다. 버튼에 입력이 표시되면 입력에 초점을 설정해야합니다. 그러나 그것은 작동하지 않는 것 같습니다. *ngIf
을 제거하면 포커스 지시문이 올바르게 작동합니다.Focus 지시어를 사용하는 Angular2 * ngIf?
내가 의미하는 것을 나타내는 plunker을 만들었습니다. 내 "문제"를 설명하는 것은 어렵습니다. 성분
HTML
<input *ngIf="filterShow.options"
[focus]="filterFocus.options"
[(ngModel)]="filter.options">
<button type="button"
(click)="setShowFilter('options')">
focus
</button>
setShowFilter() 함수
private setShowFilter(filter: string) {
this.filterShow[filter] = !this.filterShow[filter];
/* reset filter */
this.filter[filter] = "";
this.filterFocus[filter].emit(true);
}
focus.directive.ts
@Directive({
selector: '[focus]'
})
export class FocusDirective implements OnInit {
@Input('focus') focusEvent: EventEmitter<boolean>;
constructor(private elementRef : ElementRef,
private renderer : Renderer ) { }
ngOnInit() {
this.focusEvent.subscribe(event => {
this.renderer
.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
});
}
}
이벤트 이미 터를 잘못 사용하고 있습니다. 그들은 자녀 -> 부모 의사 소통을위한 것이지 부모 - 자녀를위한 것이 아닙니다. 내가 게시 한 작품은 다음과 같다 : https://plnkr.co/edit/YtaRtA0e5L6ewxq7uCH9?p=preview – adharris
'Renderer'과 그것의'.invokeElementMethod()'메소드는이 시점에서 더 이상 사용되지 않을 것이다. 'this.elementRef.nativeElement.focus()'를 직접 호출하는 것이 안전합니다. –