Question

我试图在ng2 app中的页面加载时调用jQuery函数（即初始化bootstrap selectpicker）：

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

（假设jQuery和elementRef已定义，并且在其他情况下效果很好）

我尝试在ngOnInit，ngAfterContentInit，ngAfterViewInit中调用此函数，但没有运气。

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

这是我的select模板，我尝试将其转换为bootstrap selectpicker：

<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

Answer 2

正确的答案是在ngAfterViewChecked() {}

中调用它每次更改页面时，

AfterViewChecked回调触发器，从而确保只在我设置标志selectpickerEnabled = true后调用我的函数并在再次调用函数之前检查它们。

我相信必须有正确的方法来做到这一点，但那就是我现在要解决的问题......

在Angular 2中没有在页面加载时调用jQuery函数

2 个答案: