我正在尝试使用我的angualar 6项目添加Datatables插件(datatables.net)工具.
我不知道如何使用npm安装程序将必要的css,js和其他必需文件包含到我的项目中.
选择我必要的选项后,我遵循NPM Install方法：
我不知道如何使用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文件来实现页面上的数据表设施？
如果有人这样做,请告诉我,否则任何建议将不胜感激.
谢谢.
解决方法
在Angular 6
angular-datatables中使用角度数据表
在使用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>
