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！