为什么触发事件只能在 setTimeout 内起作用？答案

【问题标题】：Why triggering events works only inside setTimeout?为什么触发事件只能在 setTimeout 内起作用？
【发布时间】：2017-05-12 14:33:48
【问题描述】：

我正在编写一个 Angular 4.1.2 组件作为 select2 4.0.3 的包装器

我对 angular 和 typescript 还是很陌生，所以也许我错过了一些东西......

我知道我可以使用一些可用的 npm 包来获得它，但我想让我的员工尽可能简单

其实此刻我写的组件正在工作，

但是有一段代码我不明白为什么一定要这样，我希望你给我一些分数。

考虑一下这个伪打字稿代码（实际上我在基类和抽象类中有很多东西，所以为了使其更具可读性，我将其剪切并粘贴到单个组件中......

注意：我将 jquery 和 select 2 都声明为 any，因为我在页面中包含了它们的脚本（不包含 npm / angular-components）

declare var $: any;
declare var select2: any;

@Component({
    moduleId: module.id,
    selector: 'select-x',
    template: `
        <select #select [(ngModel)]="value">
        </select>
    `,
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => SelectX),
        multi: true,
    }],
})

export class SelectX {

    // CUT ...

    ngAfterViewInit() {
        // validations
        // CUT ...

        var $select = $(this.select.nativeElement);

        // basic configuration
        $select.select2({
            // CUT ...
            ajax: {
                url: this.dataUrl,
                dataType: 'json',
                // CUT ...
            },
        });

        // on select 2 change => trigger model change
        $select.on("change", (event: any) => {
            // CUT ...
        });


        // set default value [WORKING]
        window.setTimeout(() => {
            var d = { data: { id: this.value, text: this.text } };
            $select.select2("trigger", "select", d);
        }, 0);

        /* set default value [NOT WORKING]
        var d = { data: { id: this.value, text: this.text } };
        $select.select2("trigger", "select", d);
        */

    }
}

我无法理解的是为什么我必须使用“windows.setTimeout”来触发选择...

如果我直接编写 select2 触发器，则 select2 组件根本不会更新...

注意：我尝试在 AfterContentInit 中实现类，并且只在 AfterViewInit 中保留选择的触发器（因此它应该在配置后调用...）但它不起作用。

你有什么提示可以给我吗？

更新：我尝试使用准备好的文档...我得到 ExpressionChangedAfterItHasBeenCheckedError

$(() => {
    console.log("ready");
    $(this.select.nativeElement).select2("trigger", "select", { data: { id: "123123", text: "item 123123" } });
});

然后我创建了这个：ExpressionChangedAfterItHasBeenCheckedError Explained 也许

现在我正在阅读有关此问题的信息...

【问题讨论】：

你可以为它建造一个 plunker 吗？我对您的问题很感兴趣，但无法通过 select 重现。 :(
@pengyy 好的，让我试试 ;)

标签： jquery angular typescript jquery-select2

【解决方案1】：

有时使用 JavaScript（包括 JavaScript 的形式），显示中的更改最终会发生冲突，因此超时允许事情在它做某事之前完成。这就是为什么我相信他们将那段代码放在函数中。

【讨论】：