使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（六）
完善动态表单组件
先来张本章节最终效果图
- 抽离公共项，优化引入方式
- 添加样式，使我们的项目更加美观
- 创建动态表格组件
- 配置页面生成文件，自动化生成
抽离公共项，优化引入方式
重复的代码就是失败的代码，所以写代码也是一个持续优化的过程。
我们需要用到增删改查，上一章利用 dynamic-form.service.ts 完成了“增”的操作，现在利用同样的文件，完成我们的查询工作，既然用到同一个服务，所以我们需要把文件抽离，让它更像一个公共文件。
dynamic-form/dyanmic-form.service.ts -> api/http/dynamic.service.ts
import { Observable } from 'rxjs/Observable';import 'rxjs/Rx';import { Injectable } from "@angular/core";import { HttpClient, HttpEvent, HttpHeaders } from "@angular/common/http";import { HttpComponentUtil } from '../../../pages/api/http/http.service';import { HandleService } from '../../../pages/api/http/handle.service';@Injectable()export class DynamicService { constructor( private http: HttpClient, private https: HttpComponentUtil, private handleService: HandleService ) {} public getList(url: string, params: {} = {}): Observable { let api_url: string = this.https.getUrl(url); return this.http.get(api_url, params) .map((res: any) => ( this.handleService.handleStatus(res)).value || undefined) .catch(err => this.handleService.handleError(err)); } /** * * * @param {string} url * @param { {}} [params={}] 请求入参的 body，参数 * @returns {Observable } 返回一个可供订阅的观察者对象 * @memberof DynamicService * * */ public saveQuery(url: string, params: {} = {}): Observable { let api_url: string = this.https.getUrl(url); // 利用公用的 http 服务，拼接获取url return this.http.post(api_url, params, { headers: this.https.headers }) .map((res: any) => ( this.handleService.handleStatus(res)).value || undefined) // 捕获错误码 .catch(err => this.handleService.handleError(err)); // 捕获系统错误 }} 如上述代码，同时添加一个 getList 方法，让它有了查询的功能，现在还需要做两件事情，先思考一下
- 在
api/index.ts导出这个服务，使其自动注入到PagesModule中 - 删除原有文件
dynamic-form.service.ts及相关信息
把时间都用在 如何找寻相对路径 这个问题上，是非常浪费时间的一件事情
在此之前，项目的引入方式都是相对路径，我们现在来修改配置，然后使路径引入变成相对路径，这里需要修改
tsconfig.json ..."paths": { "@angular/*": ["../node_modules/@angular/*"], "@components/*": ["../src/app/theme/components/*"], "@api/*": ["../src/app/pages/api/*"]}... 其中有一个选项，在之前升级的过程中已经添加，根据第一项，可以推断出新增的两个选项的用途，在下面的教程中会统一使用该方式引入，在后面配置问题将不再重复，需要读者自行添加。
注意：在配置完成后，需要重新启动项目使配置生效。添加样式，使我们的项目更加美观
好看的网页离不开优秀的设计，我们需要尽我们所能，优化页面的样式。
在此之前，项目还没有重置过样式，所以我们需要去优化一下我们的样式
npm i reset.css -D
pages.component.ts
...import "style-loader!reset.css";import "style-loader!sweetalert2/dist/sweetalert2.min.css";import "style-loader!@api/universal/style.scss";...
@api/universal/style.scss
.default-style { h1 { font-size: 30px; font-weight: bold; margin-bottom: 25px; }} 注意：使用 import 引入的样式将会无差别影响到所有的样式，所以除了公用样式，其他都使用 styleUrls 的方式引入
创建动态表格组件
在修改代码的时候，大概 60%-70% 的时间都在读之前的代码。
我们需要创建一个动态表格组件，对应的我们应该先创建一些声明文件，作为起步，同时也可以让自己知道自己在创造什么，项目结构如下图。
和动态表单类似，我们先创建
dynamic-table-base/tableItem-base.ts export class TableBase { controlType: string; // 类型 title: string; // 值，类型可选 key: string; // 字段名 order: number; // 排序 constructor( options: { controlType?: string; title?: string; key?: string; order?: number; } = {} ) { // 设置各个值的默认值 this.controlType = options.controlType || ""; this.title = options.title || ""; this.key = options.key || ""; this.order = options.order || 0; }} dynamic-table-base/tableItem-text.ts
import { TableBase } from './tableItem-base';export class TextTable extends TableBase { controlType = 'text'; constructor(options: {} = {}) { super(options); }} dynamic-table/table-base.ts
export interface TableConfig { url: string; params?: TableParams;}// 请求接口的一些参数interface TableParams { pageSize?: number; pageNumber?: number;} 准备工作到此结束，现在准备来创建我们的动态表格组件
开发组件时，需要考虑可扩展性
我们的表格组件应该有展示功能，规定显示几列，每一列的内容应该由页面传入，数据来源的 url 应该也由页面配置传入，所以我们会有两个 Input 属性。
export class DynamicTableComponent implements OnInit{ @Input() config: TableConfig; @Input() tableControls: TableBase[]; public tableDatas: any[];} 在加载组件时，应该自动请求数据，组件的最终效果如下
dynamic-table.component.ts import { Component, Input, OnInit } from '@angular/core';import { TableConfig } from "./table-base";import { TableBase } from "./dynamic-table-base/tableItem-base";import { DynamicService } from "@api/http/dynamic.service";@Component({ selector: "dynamic-table", templateUrl: "./dynamic-table.component.html", styleUrls: ["./dynamic-table.component.scss"]})export class DynamicTableComponent implements OnInit{ @Input() config: TableConfig; @Input() tableControls: TableBase[]; public tableDatas: any[]; constructor(private service: DynamicService) {} private getTableDatas(): void { this.service.getList(this.config.url, this.config.params) .subscribe((res: any[]) => { console.log(res); if (res.length > 0) { this.tableDatas = res; } }) } ngOnInit(): void { this.getTableDatas(); }} dynamic-table.component.html
{ {tableControl.title}}
- { {tableData[tableControl['key']]}}
- { {tableData | json}}
dynamic-table.component.scss
.table thead tr th { background: rgba(0,0,0,.3); color: #fff; font-size: 16px; border-top: none;}.table tbody > :first-child td { border-top: none;} 这样动态表格组件的基本样式就完成，最后别忘了在 nga.module.ts 中注册该组件。
注意：这里将 service 换成了 DynamicService， 所以 form 组件的 service也需要替换，否则会报错。
配置页面生成文件，自动化生成
组件已经构建完成，页面的配置和 form 组件的使用方法类似，这里直接贴代码
user-list.component.ts
import { Component } from '@angular/core';import { UserListService } from './user-list.service';import { TableBase } from '@components/dynamic-table/dynamic-table-base';import { TableConfig } from '@components/dynamic-table/table-base';@Component({ selector: 'ngt-user-list', templateUrl: './user-list.component.html', providers: [ UserListService ]})export class UserListComponent { public userTableControls: TableBase[]; public userTableConfig: TableConfig = { url: "user" }; constructor(private service: UserListService) { this.userTableControls = this.service.getTableControls(); }} user-list.component.html
用户列表组件
user-list/user-list.service.ts
import { Injectable } from "@angular/core";import { TableBase, TextTable} from "@components/dynamic-table/dynamic-table-base";@Injectable()export class UserListService { getTableControls() { let tableControls: TableBase[] = [ new TextTable({ key: "id", title: "ID", order: 0 }), new TextTable({ key: "firstName", title: "名称", order: 1 }), new TextTable({ key: "emailAddress", title: "Email", order: 2 }), new TextTable({ key: "brave", title: "Brave", order: 3 }) ]; return tableControls.sort((a, b) => a.order - b.order); }} 大功告成，现在可以打开浏览器，尝试先进入新增页面，新增一个用户，在成功返回后，会在表格页面查询到自己新增的数据，这样就完成了简单的数据展示。
现在表格还有几个优化的点
- 数据过多时，需要分页
- 缺少搜索功能
- 缺少删除功能
在后续文章，会陆续添加这些功能！
（此章代码在 的 dynamic-table 分支上，可以pull 下来，方便读者练习）