[英]How to appendchild dynamically using renderer2 in angular 4
I am new to angular 4, Need to add child under child using html list. 我是角4的新手,需要使用html列表在child下添加child。
@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)
}
}
How to bind click event dynamically in <li>
, when click triggered should get new child in <ul>
under the respective parent <li>
. 如何在
<li>
动态绑定click事件,当触发点击时,应在相应的父<li>
下的<ul>
获取新子级。 Tree should dynamically grow n numbers. 树应动态增长n个数字。
expected result : 预期结果 :
<div>
root
<ul>
<li>
<span> child </span>
<ul>
<li>
<span> child </span>
<ul>
<li>
<span> child </span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Whenever I click on the <li>
, should render respective child in above format with event. 每当我点击
<li>
,都应以事件的上述格式渲染相应的子级。
Solutions will be appreciated. 解决方案将不胜感激。 Thanks.
谢谢。
I've put together the demo from the following link 我从以下链接整理了演示
What I did was to create a component called NodeComponent
which will create the nodes of your tree. 我所做的是创建一个名为
NodeComponent
的组件,该组件将创建树的节点。
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);
}
}
It takes an input, text
and contains a button to add more children. 它需要输入,
text
和包含添加更多子项的按钮。 When user clicks on button, it pushes another text to children
array which will make angular add another my-node
component to DOM. 当用户单击按钮时,它将另一个文本推送到
children
数组,这将使angular向DOM添加另一个my-node
组件。
In another component, you use it as follows 在另一个组件中,您可以按以下方式使用它
<my-node text="root"></my-node>
Edit 编辑
Check this second demo with nested json object 使用嵌套的json对象检查第二个演示
To create a tree from a nested json object, let's refactor NodeComponent
to the following 要从嵌套的json对象创建树,让我们将
NodeComponent
重构为以下内容
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>
In component ts 在组件ts中
options: NodeItem;
ngOnInit() {
this.options = {
text: 'root',
children: [{
text: 'root child 1',
}, {
text: 'root child 2',
children: [{
text: 'root child 2 child 1'
}]
}]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.