Javascript 组件内部的调用索引函数

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

在索引文件的头部分，它加载一些css和js库，如jquery、bootstrap等

为了设置select和option标签的样式，我使用了引导选择

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

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

index.html

$（文档）.ready（函数（）{
如果（$（'.select_box'）.length>0）{initializeSelectPicker（）；}
});
$（窗口）。加载（函数（）{
如果（$（'.select_box'）.length>0）{adjustSelectPicker（）；}
});
$（窗口）。调整大小（函数（）{
如果（$（'.select_box'）.length>0）{adjustSelectPicker（）；}
});
函数初始化SelectPicker（）{
$（'.select_box'）。选择器（{}）；
}
功能调整选择器选择器（）{
$（this）.find（“.btn-group.bootstrap-select.select_box.show-tick.btn.dropdown-toggle.selectpicker.btn-default.filter option.pull left”）.css（“宽度”，“0”）；
$（this）.each（function（）{
var maxWidthBox=$（this）.find（“.btn-group.bootstrap-select.select\u 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（“宽度”，maxWidthBox+“px”）；
});
}

---

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

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

索引文件：

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

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

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

---

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

索引文件：

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

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

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

---

谢谢@Shane van den Bogaard，你推荐什么巫术？在angular内部使用bootstrap并具有相同的功能？我建议使用angular编写应用程序，而不仅仅是应用程序的某个部分。可以在角度组件中加载引导样式。我会将您试图修复的元素包装到自定义组件中，并在组件中处理初始化和窗口大小调整。谢谢@Shane van den Bogaard，您推荐哪种方式？在angular内部使用bootstrap并具有相同的功能？我建议使用angular编写应用程序，而不仅仅是应用程序的某个部分。可以在角度组件中加载引导样式。我将把您试图修复的那些元素包装到自定义组件中，并在组件中处理初始化和窗口大小调整。