Question

我想创建通用服务，在多个页面上集成jQuery数据表（带导出按钮）。

我已经为jquery安装了jquery和typings。还在tsconfig类型数组中包含了jquery。

"types": [
  "jquery"
]

索引页面上包含数据表所需的cdn。

在typings.d.ts中添加了一个接口JQuery：

interface JQuery {
  <dataTable>(options?: any): any;
}

Angular Service：

  ApplyDatatable() {
          $(".mydataTable").dataTable({
                "pagingType": "full_numbers",
                "iDisplayLength": 10,
                bJQueryUI: true,
                "aLengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],
                select: true,
                "aaSorting": [],
                "aoColumnDefs": [
                  {
                    'bSortable': false,
                    'aTargets': ['disableSorting', 'noExport']
                  }],
                buttons: [
                  {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                      //'copy',
                      {
                        extend: 'copyHtml5',
                        exportOptions: {
                          columns: ':visible',
                          columns: "thead th:not(.noExport)"
                        }
                      },
                      {
                        extend: 'csvHtml5',
                        exportOptions: {
                          columns: ':visible',
                          columns: "thead th:not(.noExport)"
                        }
                      }                
                ],         
                dom: 'lfBrtip',    
              }); 
}

获取错误：

jquery__WEBPACK_IMPORTED_MODULE_6 __（...）。dataTable不是一个函数（在浏览器控制台上）。

在编译项目时收到错误属性＆＃39; dataTable＆＃39;类型＆＃39; JQuery＆＃39;

上不存在

Answer 1

使用jQuery插件时，您应该创建一个Angular组件作为数据表的包装器。然后，您可以在组件呈现后调用jQuery插件。

import { Component, AfterViewInit } from '@angular/core';
import 'jquery';

@Component({
  selector: 'app-datatables',
  ...
})
export class AppDatatables implements AfterViewInit {
  ngAfterViewInit() {
    ($(".mydataTable") as any).dataTable({
      ...
    });
  }
}

组件模板：

<div class="mydataTable"></div>

由于您已经在another question中询问如何为每个新页面（视图）呈现此内容，因此现在也解决了该问题，因为每次加载/创建新页面时都会重新添加该组件

Answer 2

Declare var $:any;

在您使用通用函数或编写数据表加载函数的服务文件中写入上方语句

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

将上面的脚本标记行复制/粘贴到您的

Index.html

或任何html文件。.并确保此脚本标记行位于所有其他CSS / JS的顶部，包括HTML中的标记。

如何创建一个公共服务来集成角度的所有页面的jQuery数据表

2 个答案: