Angular2 踩雷系列文(一) - 不同的寫法

app.component.html

<tree-table [data]="treedata">
    <div class="header">
        <h2>Table Header Display Here</h2>
    </div>
    <div class="footer">
        <p>Footer text</p>
    </div>
</tree-table>

tree-row.component.css

.tbrow-even{
  background:lightgray;
}

.tbcell {
  display:table-cell;
  width:50px;
  padding:10px;
}
.tbcell.tbcell-name{
  width:150px;
}

tree-row.component.html

<div class="tbrow">
    <div class="tbcell">{{ level }}</div>
    <div class="tbcell tbcell-name">
        <span [style.padding-left.px]="level * 10">{{ item.name }}</span>
    </div>
    <div class="tbcell">
        <button>Save</button>
    </div>
</div>
<tree-row *ngFor="let subitem of item.submenu" [item]="subitem" [level]="level+1"></tree-row>

tree-row.component.ts

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

@Component({
  selector: 'tree-row',
  templateUrl: './tree-row.component.html',
  styleUrls: ['./tree-row.component.css']
})
export class TreeRowComponent {
  @Input() item: any;
  @Input() level: number;
}

tree-table.component.ts

import { Component, Input, OnInit, AfterViewChecked, ElementRef } from '@angular/core';
import { TreeRowComponent } from '../tree-row/tree-row.component';

@Component({
  selector: 'tree-table',  
  template: `
    <ng-content select=".header"></ng-content>
    <tree-row *ngFor="let item of data" [item]="item" [level]="level"></tree-row>
    <ng-content select=".footer"></ng-content>
  `
})
export class TreeTableComponent implements OnInit, AfterViewChecked {
  @Input() data: any[];

  level:number = 0;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.level = this.level + 1;
  }

  ngAfterViewChecked() {
    let elements: HTMLElement[] = this.elementRef.nativeElement.querySelectorAll('.tbrow');
    if (elements.length > 0) {
      for (let i = 0; i < elements.length; i++) {
        if (i % 2 == 0) continue;
        elements[i].className += " tbrow-even";
      }
    }
  }
}