当* ngIf =“ someData”中存在输入时，如何通过ngAfterViewInit（）向输入添加事件处理程序？

Question

I'm hooking up a jQuery on change event handler for test purposes (I know ng2 has an available (change) attribute). In my.component.ts file I can implement the following event handler successfully for a select placed directly below the router-outlet in my.component.html:

ngAfterViewInit()
{
    $('#ddlTest').on('change', function () { alert('jquery change wireup'); });
}

However, the real select I need to bind to exists within a div displayed dependent on an underlying component member variable:

<div *ngIf="searchMetadata">
   <select id="ddlTest">
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>
</div>

The member variable gets set by the component calling a service and setting the response to the variable. My problem is that it appears that the *ngIf container prevents the ngAfterViewInit event wireup logic from finding the nested select input. My guess is that ngAfterViewInit looks for the select in the html before the ngIf condition has been actualized. Any idea how I can get the event wireup working while maintaining the ngIf?

Answer 1

You need to use another hook.

ngAfterViewInit will run before you resolve your service call, so jquery will never find that #dd1Test selector.

When you update your searchMetadata run this function instead:

updateSearchMetadata(value: any): void {
   this.searchMetadata = value;
   setTimeout(() => this.watchJQuerySelectChanges() , 100);
}

watchJQuerySelectChanges(): void {
   if (this.searchMetadata) {
       $('#ddlTest').on('change', function () { alert('jquery change wireup'); });
    }
}

Also you should use NgZone ( docs ) if you want to use angular inside of the #dd1Test onChange event.

To use NgZone just inject it to the constructor:

constructor(public ngZone: NgZone)

Then in the callback of the onChange event added using jquery just add this:

$('#ddlTest').on('change', () => {
    this.ngZone.run(() => {
       this.searchMetadata = undefined; // Example to show that angular will see this.
    });
});

Update The best way

<div *ngIf="searchMetadata">
   <select #ddlTest id="ddlTest">
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>
</div>

That will allow us to use the ViewChild .

@ViewChild('ddlTest')
set ddlTest(value: ElementRef) {
   // keep the value if you want it for something.
   $('#ddlTest').on('change', () => {
        this.ngZone.run(() => {
           // Do something
           console.log('Hello there!');
        });
    });
}

Answer 2

The following approach works. It's simple and straight forward. It's hacky but it works. When addJQueryHook() gets hit, ddlTest above will already be rendered. If you know a better way then please lmk!

<div *ngIf="SearchMetadata">
    <select id="ddlTest">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div *ngIf="addJQueryHook()">
    </div>
</div>