javascript - Angular 2 中页面加载时未调用 jQuery 函数

Question

我试图在 ng2 应用程序的页面加载时调用 jQuery 函数(即初始化引导选择器):

jQuery(this.elementRef.nativeElement).find("select").selectpicker({
  iconBase: 'fa',
  tickIcon: 'fa-check',
  title: '...'
});

(假设定义了 jQuery 和 elementRef 并且在其他情况下运行良好)

我尝试在 ngOnInit、ngAfterContentInit、ngAfterViewInit 中调用此函数，但没有成功。

我怀疑它在元素渲染之前调用。

这是我的选择模板，我尝试将其转换为引导选择选择器:

<select ngControl="hashtags" [(ngModel)]="hashtags" multiple>
  <option *ngFor="#hashtag of card.hashtags" [value]="hashtag.id" (click)="selectHashtag(hashtag.id)">{{hashtag.name}}</option>
</select>

有什么想法如何正确调用它吗？

UPD: 似乎问题来自于表单(和我的选择元素)在 ngIf 内呈现的事实:

<div *ngIf="card">
...
</div>

所以，在渲染页面并调用 ngOnInit() 时，表单尚未渲染。我将尝试通过应用不同的方法来解决这个问题，但是在 http 请求和表单渲染完成后如何调用函数？

Answer 1

是不是类似于这样:

import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;

@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});
    }
}

更多信息请点击:http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0