Using Angular 2.1.0 ... 텍스트 상자에 적용 할 때 텍스트 상자 오른쪽에 "X"가 표시되면이 "X"를 클릭하면 텍스트 상자에서 텍스트가 삭제되어야한다는 지시문을 작성 중입니다. 이 angularjs repo와 비슷한 모델을 지우십시오. https://github.com/amageed/angular-resetfield.텍스트 상자를 지우는 각도 2 속성 지시문?
문제점은 지시문에 입력 값을 전달할 수 있지만 모델을 지울 수 없다는 것입니다. 이제 내 clearFunction에서 나는 다음과 같이 나타납니다. TypeError: Cannot read property 'emit' of undefined
나는 이것이 완전히 잘못된 접근 방식으로 진행될 수 있음을 알고 있으며, 어떤 제안도하고 있습니다.
@Directive({
/* tslint:disable */
selector: '[inputClear]',
exportAs: 'inputClear'
})
export class inputClearDirective implements OnInit, OnChanges {
@Input() inputClear: any;
@Output() inputClearChange = new EventEmitter();
constructor(private renderer: Renderer, private el: ElementRef) {
}
ngOnChanges(change) {
console.log('val', this.inputClear);
if (this.inputClear) {
console.log('show');
this.showElement();
}
if (!this.inputClear) {
this.hideElement();
console.log('hide');
}
}
//on Init add x to text box
ngOnInit() {
let me = this.el.nativeElement as HTMLInputElement;
if (me.nodeName.toUpperCase() !== 'INPUT') {
throw new Error('Invalid input type for clearableInput:' + me);
}
let wrapper = document.createElement('span') as HTMLSpanElement;
let searchIcon = document.createElement('i') as HTMLElement;
searchIcon.id = 'searchIcon';
// // calls the clearvalue function
searchIcon.addEventListener('click', this.clearValue);
////clears the textbox but not the model
// searchIcon.addEventListener('click', function() {
// console.log('clicked');
// let inp = this.parentElement.previousSibling as HTMLInputElement;
// if (inp && inp.value.length) {
// inp.value = '';
// }
// });
wrapper.setAttribute('style', 'margin-left: -37px;position: relative; margin-right:37px;');
searchIcon.setAttribute('style', 'display:none');
searchIcon.className = 'fa fa-times fa-1x';
wrapper.appendChild(searchIcon);
wrapper.id = 'searchSpan';
me.insertAdjacentElement('afterend', wrapper);
}
showElement() {
let searchIcon = document.getElementById('searchIcon');
if (searchIcon) {
searchIcon.removeAttribute('style');
}
}
hideElement() {
let searchIcon = document.getElementById('searchIcon');
if (searchIcon) {
searchIcon.setAttribute('style', 'display:none');
}
}
clearValue() {
console.log('clicked');
this.inputClear = '';
this.inputClearChange.emit(this.inputClear);
}
}
편집 : 여기
<input type="text" placeholder="Search" [(ngModel)]="filterText" [(inputClear)]="filterText">
다시 사용할 수 있도록이 모든 rol 처리 할 특성 지시문을 만들려고했습니다. 주도했다.
이 줄'searchIcon.addEventListener이 (this.clearValue를 '클릭'); '는'('searchIcon.addEventListener해야한다 ',() => this.clearValue());' – admax