无法在 Angular 2 组件中插入引导表答案

【问题标题】：Can't insert a bootstrap table inside an Angular 2 component无法在 Angular 2 组件中插入引导表
【发布时间】：2016-06-06 13:18:23
【问题描述】：

我正在使用 ASP.NET 5 开发一个 Angular 2 Web 应用程序。我想在组件中插入一个表格。该表是使用此库制作的：http://bootstrap-table.wenzhixin.net.cn/。我注意到，如果表格位于组件中，则它不起作用。同时，如果它位于 index.html 文件中，它就可以工作。这可能是由于文件 bootstrap-table.css 和 bootstrap-table.js 的链接位于索引中，但 index.html 应该只包含根组件，所以我必须找到一种方法来制作表工作，即使它在组件内。这是表格的代码：

<table data-toggle="table" data-url="data1.json" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

代码应该是正确的，因为它是从这里复制的：http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html。

【问题讨论】：

关于如何在组件中插入此表的任何代码都可能有助于回答这个问题
每个 Angular 2 组件都有一个名为“templateUrl”的属性，它指示包含代表该组件的 html 代码的文件。代码应该是正确的，因为它是从他们网站的示例中复制粘贴的。

标签： angular bootstrap-table

【解决方案1】：

如果你阅读了插件的源代码（bootstrap-table.js），你会发现，真的在最后，下面的代码 bootstrap all table 已经在 DOM 中可用：

$(function () {
    $('[data-toggle="table"]').bootstrapTable();
})

如果您使用 angular1（带路由）或 angular2（带组件），很可能该表不在 DOM 中，直到 angular2 需要它。

你可以做的是在ngAfterViewInit方法中手动调用bootstrapTable()函数(https://angular.io/api/core/AfterViewInit#interface-overview)

【讨论】：

但是如果我在 ngAfterViewInit 方法中使用 $ 符号，它会被加下划线。
但是如果我在 index.html 文件中移动表格代码，它会立即工作，而无需调用 bootstrapTable() 方法。
在 angular2 组件中使用 jquery：stackoverflow.com/questions/30623825/…。恕我直言，这取决于插件启动时表是否在 dom 中。如果稍后添加表格，小部件不会自行运行。
但是如何在 html 元素上调用 bootstrapTable() 方法呢？ jQuery 用于选择元素，但您只能调用元素的方法。