Angular 2中的页面加载时未调用jQuery函数答案

【问题标题】：jQuery function not called at page load in Angular 2Angular 2中的页面加载时未调用jQuery函数
【发布时间】：2016-03-13 19:06:29
【问题描述】：

我正在尝试在 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 请求和表单渲染完成后，您将如何调用函数？

【问题讨论】：

如果你把这个放在ngOnInit中并在行上放一个断点，jQuery(this.elementRef.nativeElement).find("select")会返回什么吗？
不，它不会：jQuery [] 但是，如果我在页面加载后调用$("select")，它会返回jQuery [<select class="ng-untouched ng-pristine ng-invalid">]
好的。如果稍后运行 jQuery(this.elementRef.nativeElement).find("select") 会返回什么？
如果我将console.log(jQuery(this.elementRef.nativeElement).find("select")); 绑定到一个按钮并稍后调用它，它会返回jQuery [<select class="ng-untouched ng-pristine ng-invalid">]。是你要求的吗？
请参阅问题正文中的 UPD 以了解更多详细信息...

标签： javascript jquery angular

【解决方案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'});
    }
}

【讨论】：

正确，我就是这样做的，使用来自 Torgeir Helgevold 的样本，它对我不起作用。
模板中如何包含select标签？
<select ngControl="hashtags" [(ngModel)]="hashtags" multiple> <option *ngFor="#hashtag of card.hashtags" [value]="hashtag.id" (click)="selectHashtag(hashtag.id)">{{hashtag.name}}</option> </select>
我没有使用过 selectPicker，但这里有一个带有引导下拉菜单的 plunker。也许您可以将其用作基线：plnkr.co/edit/up5UdH?p=preview

【解决方案2】：

正确的答案是在ngAfterViewChecked() {}内部调用它

AfterViewChecked 回调在每次页面更改时触发，从而确保我的函数仅在我设置标志后被调用，即selectpickerEnabled = true，并在再次调用函数之前检查它们。

我相信一定有正确的方法来解决它，但这就是我现在要解决的方法......

【讨论】：