如何在angular 4中使用renderer2动态追加子项 [英] How to appendchild dynamically using renderer2 in angular 4

问题描述

我是angular 4的新手，需要使用html列表在child下添加child.

I am new to angular 4, Need to add child under child using html list.

@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> 中动态绑定click事件，当触发点击时，应该在相应的父<下的< ul> 中获得新的子代.li> .树应动态增长n个数字.

How to bind click event dynamically in <li>, when click triggered should get new child in <ul> under the respective parent <li>. Tree should dynamically grow n numbers.

预期结果:

<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> 时，都应以事件的上述格式呈现相应的子级.

Whenever I click on the <li>, should render respective child in above format with event.

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

Solutions will be appreciated. Thanks.

推荐答案

我将以下链接中的演示放在一起

I've put together the demo from the following link

查看演示

我所做的是创建一个名为 NodeComponent 的组件，该组件将创建树的节点.

What I did was to create a component called NodeComponent which will create the nodes of your tree.

Node.component.ts

Node.component.ts

@Component({
  selector: 'my-node',
  template: `
    <span>{{text}}</span>
    <button (click)="addChild()">Add Child!</button>
    <ul>
      <li *ngFor="let child of children">
        <my-node [text]="child"></my-node>
      </li>
    </ul>
  `
})
export class NodeComponent implements OnInit {

  @Input() text;
  children: string[];

  ngOnInit() {}

  addChild() {
    if (!this.children) {
      this.children = [];
    }
    const childText = `${this.text} - ${this.children.length + 1} - child`;
    this.children.push(childText);
  }
}

它需要输入 text ，并包含一个添加更多子项的按钮.当用户单击按钮时，它将另一个文本推入 children 数组，这将使angular向DOM添加另一个 my-node 组件.

It takes an input, text and contains a button to add more children. When user clicks on button, it pushes another text to children array which will make angular add another my-node component to DOM.

在另一个组件中，您可以按以下方式使用它

In another component, you use it as follows

<我的节点text ="root"></my-node>

修改

使用嵌套的json对象检查第二个演示

要从嵌套的json对象创建树，让我们将 NodeComponent 重构为以下内容

To create a tree from a nested json object, let's refactor NodeComponent to the following

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

export interface NodeItem {
  text: string;
  children?: NodeItem[];
}

@Component({
  selector: 'my-node',
  template: `
    <span>{{options.text}}</span>
    <button (click)="addChild()">Add Child!</button>
    <ul>
      <li *ngFor="let child of options.children">
        <my-node [options]="child"></my-node>
      </li>
    </ul>
  `
})
export class NodeComponent implements OnInit {

  @Input() options: NodeItem;

  ngOnInit() {}

  addChild() {
    if (!this.options.children) {
      this.options.children = [];
    }
    const childText = `${this.options.text} - ${this.options.children.length + 1} - child`;
    this.options.children.push({text: childText});
  }
}

而且，要在其他组件中使用它，只需执行以下操作

And, to use it within another component you simply do following

<my-node [options]="options"></my-node>

在组件ts

options: NodeItem;

ngOnInit() {
  this.options = {
    text: 'root',
    children: [{
      text: 'root child 1',
    }, {
      text: 'root child 2',
      children: [{
        text: 'root child 2 child 1'
      }]
    }]
  }
}

这篇关于如何在angular 4中使用renderer2动态追加子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！