如何在角度4中使用renderer2动态追加

Question

我是角度4的新手，需要使用html列表添加孩子。

@Component({

  selector: 'my-app',

  template:` 
    <div>
      <ul #root (click)="getChild($event)">root</ul> 
    </div>
`
})

export class App implements OnInit {

  name:string;

  @ViewChild('root') root;
  constructor( private renderer : Renderer2) {

  }

  ngOnInit() {

  }

  getChild(evt) {

    let li = this.renderer.createElement('li');
    let span = this.renderer.createElement('span');
    let text = this.renderer.createText('Child');
    this.renderer.appendChild(span, text);
    this.renderer.appendChild(li, span);
    this.renderer.appendChild(this.root.nativeElement, li)
  }
}

如何在<li>中动态绑定点击事件，当点击触发时，应在相应的父<ul>下的<li>中获取新的孩子。树应该动态增长n个数字。

预期结果：

<div>
     root
   <ul>
     <li>
         <span> child </span>
         <ul>
            <li>
                <span> child </span>
                <ul>
                    <li>
                       <span> child </span>
                    </li>
                </ul>
            </li>
         </ul>
     </li>             
  </ul>
</div>

每当我点击<li>时，都应该使用事件以上述格式呈现相应的孩子。

解决方案将不胜感激。谢谢。