如何在Angular 2中展开/折叠递归树形视图？

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

@Component({
  selector: 'tree-node',
  template: `
    <div>
      <span (click)="toggle()">{{ node.name }}</span>
      <div *ngIf="expanded">
        <tree-node *ngFor="let childNode of node.children" [node]="childNode"></tree-node>
      </div>
    </div>
  `,
})
export class TreeNodeComponent {
  @Input() node: any;
  expanded: boolean = false;

  toggle() {
    this.expanded = !this.expanded;
  }
}

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

@Component({
  selector: 'app',
  template: `
    <div>
      <tree-node *ngFor="let rootNode of treeData" [node]="rootNode"></tree-node>
    </div>
  `,
})
export class AppComponent {
  treeData = [
    {
      name: 'Node 1',
      children: [
        {
          name: 'Node 1.1',
          children: [
            {
              name: 'Node 1.1.1',
              children: []
            }
          ]
        },
        {
          name: 'Node 1.2',
          children: []
        }
      ]
    },
    {
      name: 'Node 2',
      children: []
    }
  ];
}