基于angular的组件递归

//html
<div>
    <div *ngFor='let val of data'>
      <div >
            {{val.name}}
      </div>
      <app-list  *ngIf='val.children' [data]='val.children'></app-list>
    </div>    
</div>

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  @Input() data=[
      {name:'t'},
        {name:'t1',children:[
          {name:'t11'},
            {name:'t12'}
        ]},
        {name:'t2'}
    ]
    
  constructor() { }

  ngOnInit() {
      
  }

}