Angular 如何把表格里面的tr提出去作为组件

[deepthan]

带有属性选择器的组件

子组件选择器写成属性选择器即可，传值和普通传值一致。

父组件

import {Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `
  <table>
    <tr myTd *ngFor="let animal of animals" [animal]="animal"></tr>
  </table>
  `
})
export class AppComponent {
  animals = [ '猫', '狗' ];
}

子组件

import {Component, Input} from '@angular/core';

@Component({
  selector: '[myTd]',
  template: `<td >{{animal}}</td>`
})
export class MyTdComponent {
  @Input() animal;
}