如何使引导 jquery 在 Angular2 中使用动态构建的 html答案

【问题标题】：How to make bootstrap jquery work with dynamically built html in Angular2如何使引导 jquery 在 Angular2 中使用动态构建的 html
【发布时间】：2018-04-11 00:46:35
【问题描述】：

我正在尝试动态创建侧边栏。可以通过单击菜单项来折叠或展开。使用

<div [innerHtml]="function()"></div>

有效。但是子菜单应该是折叠的。但是当你点击它时它不会展开。出现错误。

当我尝试使用动态组件ng-template sideBarPage></ng-template>时，它被折叠了，但我得到了以下错误。不知道它是否需要一个路由器地图。

injector.ts:1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'subMenu1'
Error: Cannot match any routes. URL Segment: 'subMenu1'

我也试过encapsulation: ViewEncapsulation.Native。当使用 Native 模式时，所有子菜单都被展开并且点击不起作用。

我在这里创建了一个示例 https://embed.plnkr.co/mn8gKcBzJLD4StrN5SmP/

“侧边栏项目 2”应折叠并单击展开。

我是 Angular 的新手。任何帮助表示赞赏。谢谢

【问题讨论】：

不要在视图中绑定函数。每次更改检测运行时都会调用它。即使错误消息来自路由器，您的问题也没有提供有关路由器设置的任何信息。
当我点击侧边栏项目 2 时，URL 是 /#subMenu1
插件包含太多代码。 stackoverflow.com/help/mcve
抱歉代码太多了。我现在已经把它缩小到最低限度了。

是的，当您单击侧边栏 item2 时，链接会正确显示。但它没有扩展。其中，我无法在 plunkr 上显示。但是当我直接从 WebStorm 运行并在 Google Chrome 中打开它时，它既不会显示向下插入符号，也不会在您单击它时打开（展开）子菜单。
想知道它是否与引导程序用于导航栏的 JQuery 有关。如果 html 是静态的，它可以工作，但是当 html 文本被动态包含时，子菜单不会扩展或收缩（尽管链接是正确的）。

标签： twitter-bootstrap angular angular2-directives angular-components

【解决方案1】：

在 innerHtml 文本上引入管道后，问题得到解决。这是帮助您的link。

通过查看 Chrome 浏览器中的元素，发现缺少“id”属性。清理 html 后，我可以看到并单击向下插入符号并展开侧边栏。

【讨论】：