Question

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

在索引文件的head部分，它会加载一些css和js库，例如jquery，bootstrap等。

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

问题是：在索引文件中硬编码的选择框工作正常，但角度应用程序内部的选项框只能在开头工作。

如果我使用 * 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'));

调用组件内的索引函数

1 个答案: