在组件内部调用索引函数

Question

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

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

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

问题是：在索引文件中硬编码的 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'));

在组件内部调用索引函数

Call index functions inside a component

javascript

angular

typescript

bootstrap-4

bootstrap-select