在组件内调用索引函数

Question

我有一个 angular 4 应用程序，在 index.html 文件中，我在 ng 应用程序前后有很多 html 元素，因为它只是网站的一个小部件/组件。

在index文件的head部分，加载一些css和js库，如jquery、bootstrap等。

为了设置选择和选项标签的样式，我使用 bootstrap-select。

问题是：在索引文件中硬编码的选择框可以正常工作，但 Angular 应用程序中的选择框只能在开始时工作。

如果我使用 *ngIf 指令隐藏和显示元素，当它再次添加时，它不会调用索引文件中的 2 个函数。

index.html

<script>
    $(document).ready(function(){
        if ($('.select_box').length > 0){initializeSelectPicker();}
    });

    $(window).load(function(){
        if ($('.select_box').length > 0){adjustSelectPicker();}
    });

    $(window).resize(function(){
        if ($('.select_box').length > 0){adjustSelectPicker();}
    });

    function initializeSelectPicker(){
        $('.select_box').selectpicker({});
    }

    function adjustSelectPicker(){

        $(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default .filter-option.pull-left").css("width", "0");

        $(this).each(function(){
            var maxWidthBox = $(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default").width() - 20;
            $(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default .filter-option.pull-left").css("width", maxWidthBox + "px");
        });
    }
</script>

有没有办法在组件的ngOnChanges中调用它们？

Answer 1

我不推荐这种方法，但这可以通过发出事件并在索引文件中侦听所需的事件名称来解决。

索引文件：

window.addEventListener('ngFix', function(e) {
// call either one of the methods you wish to run.
});

您必须在组件中的某个地方发出事件，大概是 if 指令的输入值发生更改的地方。

window.dispatchEvent(new CustomEvent('ngFix'));