通用组件-TemplateRef应用

src/app/view/admin/components/common-table/common-table.component.html

@@ -26,7 +26,14 @@
                     nzTooltipPlacement="top"
                     nz-tooltip>
                     <ng-template [ngIf]="!headData.isActionColumns">
-                        {{ getValue(index, headData.fieldValue) }}
+                        <ng-template [ngIf]="template[headData.fieldValue]">
+                            <ng-container
+                                    *ngTemplateOutlet="template[headData.fieldValue].temp; context:getContext(headData.fieldValue,index) ">
+                            </ng-container>
+                        </ng-template>
+                        <ng-template [ngIf]="!template[headData.fieldValue]">
+                            {{ getValue(index, headData.fieldValue) }}
+                        </ng-template>
                     </ng-template>
                     <ng-container *ngIf="headData.isActionColumns">
                         <a *ngFor="let action of headData.action; let i = index" (mouseenter)="action.hover(t)"

src/app/view/admin/components/common-table/common-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef} from '@angular/core';
 import {Data} from './data';
 import {PageList, RequestObj} from '../../../../class/HttpReqAndResp';
 import {HttpService} from '../../../../api/http/http.service';
@@ -17,9 +17,15 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     /**
      * 设置readonly data 因为后面有使用eval 为了安全 TODO
      */
-    @Input() readonly data: Data<T>[]
-    @Input() request: RequestObj
-    @Input() cardTitle: string
+    @Input() readonly data: Data<T>[];
+    @Input() request: RequestObj;
+    @Input() cardTitle: string;
+    @Input() template: {
+        [fieldValue: string]: {
+            temp: TemplateRef<any>,
+            param?: { [key: string]: string }
+        }
+    };
     loading: boolean = true;
 
     dataList: PageList<T> = new PageList<T>();
@@ -58,6 +64,23 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     getValue(index: number, fieldValue: string) {
         // todo: 过滤
         // tslint:disable-next-line:no-eval
-        return eval(`this.dataList.list[${index}].` + fieldValue);
+        const value = eval(`this.dataList.list[${index}].` + fieldValue);
+        return value ? value : '暂无数据';
+    }
+
+    getContext = (fieldValue: string, index: number) => {
+        const valueData = this.getValue(index, fieldValue);
+        let context: { value: string, originValue?: string };
+        if (this.template[fieldValue].param) {
+            context = {
+                value: this.template[fieldValue].param[valueData],
+                originValue: valueData
+            }
+        } else {
+            context = {
+                value: valueData
+            }
+        }
+        return context;
     }
 }

src/app/view/admin/components/common-table/common-table.module.ts

@@ -4,7 +4,7 @@ import {CommonTableComponent} from './common-table.component';
 import {
     NzCardModule,
     NzDividerModule,
-    NzIconModule,
+    NzIconModule, NzOutletModule,
     NzTableModule,
     NzToolTipModule,
     NzTypographyModule
@@ -25,7 +25,8 @@ import {
         NzTypographyModule,
         NzToolTipModule,
         NzCardModule,
-        NzIconModule
+        NzIconModule,
+        NzOutletModule
     ]
 })
 export class CommonTableModule {

src/app/view/admin/components/common-table/data.ts

@@ -1,10 +1,18 @@
+import {TemplateRef} from '@angular/core';
+
 export class Data<T> {
     fieldName: string;
     fieldValue: string;
     show: boolean = true;
     primaryKey?: boolean = false;
     isActionColumns?: boolean = false;
-    action?: {
+    template?: {
+        template: TemplateRef<any>,
+        keymap?: {
+            [value: string]: string
+        }
+    };
+    action ?: {
         name: string,
         color?: string,
         order?: number,