路由导致返回原始页面答案

【问题标题】：Routing leads back to originating page路由导致返回原始页面
【发布时间】：2019-04-30 12:24:37
【问题描述】：

我正在使用 Angular 6 开发一个 Web 应用程序。我正在使用引导库 bootstrap-select (https://developer.snapappointments.com/bootstrap-select/) 创建组合框（允许搜索功能）。我有这个问题：

我的应用程序由几个页面组成（感谢 Angular 路由机制）；此代码似乎工作正常：

<select class="form-control selectpicker" data-width="250px" data-live-search="true" 
        title="Select the right value" data-size="10">
    <option value="a">Value 1</option>
    <option value="b">Value 2</option>
    <option value="c">Value 3</option>
</select>

并以图形方式显示<select>（路径为：http://localhost:4200/page1）：

不幸的是，如果我去别的地方（在我的应用程序的另一个逻辑路径中，例如：http://localhost:4200/page2）然后回到我之前的页面（http://localhost:4200/page1），<select>消失了！！

我确定问题来自库，即class="form-control selectpicker"，（没有此命令行为是正确的）但我不明白为什么会发生这种情况以及如何解决问题！谢谢。

【问题讨论】：

看起来插件会在窗口加载时初始化下拉菜单。当您销毁 page1 并返回时，需要再次初始化下拉菜单。您可以尝试将 $('.selectpicker').selectpicker(); 添加到 page1 组件的 ngOnInit() 吗？
我做了，但情况没有改变......
在您的第二个屏幕截图中，如果您检查 <select class="form-control selectpicker" 是否存在于 DOM 中？在 page1 的ngOnInit() 中，是否可以记录 $('.selectpicker') 的结果以确保元素存在？
如果我检查 DOM，
如果你在ngAfterViewInit()中登录$('.selectpicker')，它的长度是否仍然为0？

标签： html angular twitter-bootstrap-3 html-select bootstrap-select

【解决方案1】：

对我来说这很有效

 ngAfterViewInit(){
  setTimeout(() => {
    $('.selectpicker').selectpicker();      
  },100);
 }

【讨论】：