angular5簡單暴力封裝table，實戰乾貨！

嘗試對table進行簡單封裝，傳入接口地址便可，簡單暴力

• 使用方法，table參數爲接口地址

<div table="api/runner/list">
    <ng-template #head>
      <th>序號</th>
      <th>訂單號</th>
      <th>任務要求</th>
    </ng-template>
    <ng-template #body let-item>
      <td>{{item.id}}</td>
      <td>{{item.origin_id}}</td>
      <td>
        <ul>
          <li *ngFor="let step of item.steps">
            {{step.tiem}} {{step.position}} {{step.note}}
          </li>
        </ul>
      </td>
    </ng-template>
  </div>
複製代碼

• 實現思路

import {
  Component,
  OnInit,
  ContentChild,
  TemplateRef,
  Input
} from "@angular/core";

@Component({
  selector: "[table]",
  templateUrl: "./table.component.html",
  styleUrls: ["./table.component.scss"]
})
export class TableComponent implements OnInit {
  @Input() table: string;
  @ContentChild("head") head: TemplateRef<any>;
  @ContentChild("body") body: TemplateRef<any>;
  constructor() {}

  ngOnInit() {}
}
複製代碼

<table *get="let list of table" class="table">
  <thead class="thead-dark">
    <tr>
      <ng-container *ngTemplateOutlet="head"></ng-container>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of list">
      <ng-container *ngTemplateOutlet="body;context:{$implicit: item}"></ng-container>
    </tr>
  </tbody>
</table>
複製代碼

分析說明

代碼很簡單，知識點ngTemplateOutlet，思想控制翻轉！ 上一篇文章封裝的get和post

幾句代碼封裝了一個強勁的table，個人大NG！