Angular: почему изменение значения <input>(с использованием renderer2) не вызывает привязку событий к этому <input> - PullRequest
Новая
       32

Angular: почему изменение значения <input>(с использованием renderer2) не вызывает привязку событий к этому <input>

0 голосов
/ 15 апреля 2019

Сценарий: отметьте этот стек * блиц

  • когда я изменяю входное значение, набирая что-то, все события (keyup), (change) и (ngModelChange) запускаются;
  • когда я изменяю входное значение на renderer2, ни одно из событий не запускается

что я хочу :

Я хочу программно напечатать что-нибудь, чтобы события в этом входном событии сработали

соответствующий код : 

import { Component, OnInit, OnChanges, AfterViewInit ,ElementRef, Renderer2, ViewChild, ViewChildren } from '@angular/core';


@Component({
  selector: 'dom-comp',
  template: `

  <p><b>the Issue</b>: when i try to change the value of an input field by renderer2 - the (change) and (ngModelChange) events are not triggered, even though the values are changed !!</p>
  <input type='text' #myIn placeholder="if you type here, events will trigger"  [(ngModel)]='myInputVal' 
(change)="inputChanged()" 
(ngModelChange)="ngModelChanged()" 
 (keyup)="keyPressed($event)"
/> <br/>{{myInputVal}}

<br/>
<button #myBtn type="button" (click)='setFocusAndVal()'>press this button to change the value of the input field</button>

  `,
  styles: [ `input{width:90vw;}` ]
})
export class DomComponent implements OnInit, OnChanges, AfterViewInit {
  subTitle = 'Dom Component';
    @ViewChild('myIn')myInput:ElementRef;
    @ViewChild('myBtn')myButton:ElementRef;


    constructor(private elR:ElementRef, private rend:Renderer2){}

    ngOnInit(){}
    ngOnChanges(){}

    ngAfterViewInit(){
        console.log(this.myInput);
        //this.rend.setStyle(this.myInput.nativeElement, 'background', 'lightBlue');
        //this.rend.setStyle(this.myInput.nativeElement, 'color', 'red');
        this.myInput.nativeElement.focus();        
    }

    keyPressed(event){
        console.log("key pressed",event.target.value);

    }

    setFocusAndVal() {
        this.myInput.nativeElement.value = 'triggered by (button)';
        this.myInput.nativeElement.focus();
        setTimeout(()=>{ this.myInput.nativeElement.value = ' '; }, 1000);
        setTimeout(()=>{ this.myInput.nativeElement.value = ''; }, 3000);
        this.myButton.nativeElement.focus();
    }

    inputChanged() {
        console.log("inside inputChanged");
        this.rend.setProperty(this.myInput.nativeElement, 'value', 'triggered by (change)');
        this.myInput.nativeElement.focus();
        setTimeout(()=>{ this.rend.setProperty(this.myInput.nativeElement, 'value', ' '); }, 1000);
    }

    ngModelChanged(){
        console.log("inside ngModelChanged");
    }

}

1 Ответ

0 голосов
/ 15 апреля 2019

Вы можете попытаться добавить метод прослушивания renderer2 в ngAfterViewInit 

ngAfterViewInit(){
        console.log(this.myInput);

        this.renderer.listen(this.myInput.nativeElement, 'keyup', () => {
             //Add your stuffs
        });

        //this.rend.setStyle(this.myInput.nativeElement, 'background', 'lightBlue');
        //this.rend.setStyle(this.myInput.nativeElement, 'color', 'red');
        this.myInput.nativeElement.focus();        
    }
...