通用组件-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() readonly data: Data<T>[];
-    @Input() request: RequestObj
+    @Input() request: RequestObj;
-    @Input() cardTitle: string
+    @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,

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

@@ -1 +1,23 @@
-<app-common-table [data]="data" [request]="req" cardTitle="文章管理"></app-common-table>
+<app-common-table [data]="data" [request]="req" cardTitle="文章管理"
+                  [template]="{
+                      dislikeCount:{temp:tag},
+                      readingNumber:{temp:readingNumber},
+                      open:{temp:open},
+                      original:{temp:original,param:{true:'原创',false:'转载'}
+                  }}">
+</app-common-table>
+<ng-template #tag let-value="value">
+    <nz-tag [nzColor]="'#87d068'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #readingNumber let-value="value">
+    <nz-tag [nzColor]="'#f50'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #original let-value="value" let-originValue="originValue">
+    <nz-tag [nzColor]="originValue?'#87d068':'#f50'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #open let-value="value">
+    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+</ng-template>

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

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
 import {Data} from '../components/common-table/data';
 import {Article} from '../../../class/Article';
 import {RequestObj} from '../../../class/HttpReqAndResp';
@@ -24,6 +24,8 @@ summary:    a
 tags: [{id: 26, name: "脚本"}, {id: 27, name: "网课"}]
 title: "教你动手写一个刷课脚本"
 updateDateFormat: "2020-05-27 00:55:05"*/
+    // @ViewChild('tag') tagTemp: TemplateRef<any>;
+
     constructor() {
         this.data = [
             {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},

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

@@ -3,6 +3,8 @@ import {CommonModule} from '@angular/common';
 import {TestCommonTableComponent} from './test-common-table.component';
 import {Router, RouterModule} from '@angular/router';
 import {CommonTableModule} from '../components/common-table/common-table.module';
+import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -10,7 +12,10 @@ import {CommonTableModule} from '../components/common-table/common-table.module'
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: TestCommonTableComponent}]),
-        CommonTableModule
+        CommonTableModule,
+        NzTagModule,
+        NzCheckboxModule,
+        FormsModule
     ]
 })
 export class TestCommonTableModule {