使用Angular 6的全功能Datatables插件

Question

我正在尝试使用我的angualar 6项目添加Datatables插件(datatables.net)工具.我不知道如何使用npm安装程序将必要的css,js和其他必需文件包含到我的项目中.选择我必要的选项后,我遵循NPM Install方法:

npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4

安装后,我不确定如何在我的项目中使用这些.我的项目使用ngx-bootstrap(https://www.npmjs.com/package/ngx-bootstrap)进行样式设计.

style.scss // where I am only importing my css theme from node_modules

在ngx-bootstrap中,样式是组件明智的,我很容易使用它们.那么,我如何将数据表功能用作组件？换句话说,我应该在哪里包含css和必需的js文件来实现页面上的数据表设施？

如果有人这样做,请告诉我,否则任何建议将不胜感激.

谢谢.

Answer 1

在Angular 6 角度数据表中使用角度数据表

在使用NPM获取最新版本之前,您需要安装其依赖项:

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

angular.json

在app.module.ts中导入DataTablesModule

import { DataTablesModule } from 'angular-datatables';

imports: [
    DataTablesModule
  ],

我的datatableslibrary.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataService } from '../data.service';

@Component({
  selector: 'app-datatableslibrary',
  templateUrl: './datatableslibrary.component.html',
  styleUrls: ['./datatableslibrary.component.css']
})
export class DatatableslibraryComponent implements OnInit, OnDestroy {

  users$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private http: HttpClient, private data: DataService) {
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.data.getUsers().subscribe(data => {
      this.users$ = data;
      this.dtTrigger.next();
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

}

我的datatableslibrary.component.html

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users$">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.website }}</td>
    </tr>
  </tbody>
</table>

Answer 2

只需在 angular(-cli).json 中的样式部分中添加 .css 文件，在脚本部分中添加 .js 文件即可。我认为这会解决你的问题。