如何使用Angular 5指令向表格中注入并填充行？

没问题！我来帮你实现用Angular 5指令向表格注入行的需求，下面分步骤给你讲解具体实现方式：

这种方式适合行结构固定的场景，我们可以创建一个属性指令，在指令初始化时生成目标行并添加到表格中。

1. 创建自定义指令 #

首先创建指令文件（可以用Angular CLI命令ng generate directive inject-table-row快速生成，也可以手动创建），然后编写指令逻辑：

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appInjectTableRow]' // 指令选择器，可绑定在table或tbody标签上
})
export class InjectTableRowDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    // 创建<tr>元素
    const rowElement = document.createElement('tr');
    // 填充你提供的行内容
    rowElement.innerHTML = `
      <td class="left">Amanda Doe</td>
      <td class="number1">250</td>
      <td class="table1">2</td>
      <td class="right-bill">Bill</td>
    `;
    // 将生成的行添加到宿主元素（表格或tbody）中
    this.el.nativeElement.appendChild(rowElement);
  }
}

2. 在模块中注册指令 #

确保你的指令已经在对应的NgModule的declarations数组中注册，不然Angular无法识别它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { InjectTableRowDirective } from './inject-table-row.directive';

@NgModule({
  declarations: [
    AppComponent,
    InjectTableRowDirective // 注册自定义指令
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用指令 #

现在你可以把指令绑定到表格或者tbody标签上，指令会自动注入目标行：

<!-- 绑定在table上 -->
<table appInjectTableRow>
  <tr>
    <th>Name</th>
    <th>Amount</th>
    <th>Qty</th>
    <th>Action</th>
  </tr>
</table>

<!-- 或者绑定在tbody上，更符合语义 -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Amount</th>
      <th>Qty</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody appInjectTableRow>
    <!-- 指令会在这里注入新行 -->
  </tbody>
</table>

如果以后你需要动态修改行内容或者自定义行结构，推荐用这种方式——通过结构型指令渲染你预先定义的模板：

1. 修改指令代码 #

这次我们用TemplateRef和ViewContainerRef来渲染模板内容：

import { Directive, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appInjectTableRow]'
})
export class InjectTableRowDirective implements OnInit {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit(): void {
    // 创建嵌入视图，将ng-template中的内容渲染到容器中
    this.viewContainerRef.createEmbeddedView(this.templateRef);
  }
}

2. 在模板中使用指令 #

现在你可以在ng-template中定义行结构，然后通过指令把它渲染到页面：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Amount</th>
      <th>Qty</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <ng-template appInjectTableRow>
      <!-- 这里写你需要注入的行代码 -->
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
    </ng-template>
  </tbody>
</table>

如果需要动态修改行里的内容，可以给指令添加@Input()属性来接收外部数据：

修改方案一的指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appInjectTableRow]'
})
export class InjectTableRowDirective implements OnInit {
  // 定义输入属性，接收行数据
  @Input() rowData: {name: string, amount: string, qty: string, action: string};

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    // 给默认值以防没有传入数据
    const defaultData = {name: 'Amanda Doe', amount: '250', qty: '2', action: 'Bill'};
    const data = this.rowData || defaultData;

    const rowElement = document.createElement('tr');
    rowElement.innerHTML = `
      <td class="left">${data.name}</td>
      <td class="number1">${data.amount}</td>
      <td class="table1">${data.qty}</td>
      <td class="right-bill">${data.action}</td>
    `;
    this.el.nativeElement.appendChild(rowElement);
  }
}

使用时传入数据：

<tbody [appInjectTableRow]="{name: 'John Smith', amount: '300', qty: '5', action: 'Bill'}">
</tbody>

内容的提问来源于stack exchange，提问作者flash