Angular JS 2中模板元素的递归

Question

我在 Angular 2 中遇到了一种情况。我必须基于子级迭代 ngFor。我的组件应该能够根据给定的 Input 呈现列表。所以这里是数据结构

[
 {
   name: 'ABCD',
   child:[
     name: 'A1',
     child:[
      name: 'A1.1',
      child:[....]
     ]
   ] 
 }
]

现在我尝试通过操作 DOM 使用组件生命周期 ngOnInit 在我的模板中渲染这个结构，它正在工作。

有没有其他方法可以不用在 Angular 2 中操作 DOM？可能是通过在模板内使用 ngFor 或其他方式。我尝试了很多东西，但没有运气。

更新：尝试 DOM 操作

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

@Component({
  selector: 'multiple-drop-down',
  template: `
  <div class="dropdown">
    <button id="dLabel" type="button" class="btn btn-primary"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 {{selected.size}} item selected<span class="caret"></span>
    </button>
    <ul class="dropdown-menu treeview" aria-labelledby="dropdownMenu">
        <li id="item-lists">
            <a href="javascript:void(0);" (click)="toggleItemSelect($event)">
                <input (change)="selectAll($event)" type="checkbox" id="checkbox-select-all">
                <label for="tall" class="custom-unchecked">Select All</label>
            </a>
        </li>
    </ul>
  </div>
   `,
 })
 export class MultipleDropDownComponent implements OnInit {
 menuItemList: Array<MenuObject>;
 selected: Set<string>;

 constructor() {
   this.selected = new Set<string>();
   this.menuItemList = [
     { name: 'item 1', id: 'A', child: [
       { name: 'item 1.1', id: 'A1', child: [
           { name: 'item 1.11', id: 'Aa1', child: []},
           { name: 'item 1.12', id: 'Aa2', child: []},
           { name: 'item 1.13', id: 'Aa3', child: []}
       ]},
       { name: 'item 1.2', id: 'A2', child: []}]},
    { name: 'item 2', id: 'B', child: []},
    { name: 'item 3', id: 'C', child: []},
    { name: 'item 4', id: 'D', child: []}];
  }

  ngOnInit() {

    // calling render method to populate dropdown values
    this.renderChildElements('item-lists', this.menuItemList , 'first');
  }

  renderChildElements(id: string, items: MenuObject[], key: string): void {
    let parent = this.createULElement(id, key);
    items.forEach((element: MenuObject) => {
        let Li = document.createElement('li');
        Li.setAttribute('id', element.id);
        Li.innerHTML = `<a href="javscript:void(0);"
                        (click)="toggleItemSelect($event)">
                        <input type="checkbox" name="` + element.name + `"
                        id="` + element.id + `" (click)="toggleMultiSelect($event, ` + element + `)">
                        <label for="tall-1" class="custom-unchecked">` + element.name + `</label>
                        </a>`;
        document.querySelector('#' + parent).appendChild(Li);

        // this condition is responsible for recurrsion process
        if ( element.child.length > 0 ) {
            this.renderChildElements(element.id, element.child, element.id);
        }
    });
  }

  createULElement(parentId: string, childId: string): string {
    let ulId = childId + 'ul';
    let newUl = document.createElement('ul');
    newUl.setAttribute('id', ulId);
    document.querySelector('#' + parentId).appendChild(newUl);
    return ulId;
  }
}

export interface MenuObject {
   id: string;
   name: string;
   child?: MenuObject[];
}

Answer 1

这应该做你想做的：

@Component({
  selector: 'child',
  template: `
<div>{{data?.name}}</div>
<child [data]="data?.child]></child>`
})
class ChildComponent {
  @Input() data;
}

@Component({
  selector: 'my-app',
  template: `
<child [data]="data?.child]></child>`
})
class ChildComponent {
data = [
 {
   name: 'ABCD',
   child:[{
     name: 'A1',
     child:[{
      name: 'A1.1',
      child:[....]
     }]
   }] 
 }
];
}