Как создать общий сервис для интеграции данных JQuery для всех страниц в угловых - PullRequest
Новая
       24

Как создать общий сервис для интеграции данных JQuery для всех страниц в угловых

0 голосов
/ 02 июня 2018

Я хочу создать общий сервис для интеграции таблиц данных jQuery (с кнопками экспорта) на нескольких страницах.

Я установил jquery и набрал текст для jquery.Также включил jquery в массив типов tsconfig. 

"types": [
  "jquery"
]

Включены обязательные cdn (s) для датирования данных на странице индекса.

Добавлен интерфейс JQuery в typings.d.ts: 

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

Служба Angular: 

  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 не являетсяфункция (в консоли браузера).

при компиляции проекта с ошибкой Свойство 'dataTable' не существует для типа 'JQuery'

1 Ответ

0 голосов
/ 04 июня 2018

При использовании плагина jQuery вы должны создать угловой компонент в качестве оболочки для объекта данных.Затем вы можете вызвать плагин 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>

Поскольку вы уже задали вопрос в Еще один вопрос , как это сделать для каждой новой страницы (представления), эта проблема также решается и сейчас, поскольку компонент будет добавляться повторно при каждой загрузке / создании новой страницы.

...