deepthan / blog-angular

Angular 笔记
280 stars 58 forks source link

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

Open deepthan opened 4 years ago

deepthan commented 4 years ago

带有属性选择器的组件

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

父组件

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;
}