1
Я экспериментировал с созданием динамического элемента с помощью Angular2 и у меня есть следующий код, используя Renderer:Angular2 - Достать динамически созданный элемент
Компонент
export class DesignerComponent {
@ViewChild('builder') builder:ElementRef;
renderer: Renderer;
constructor(private elementRef: ElementRef, private rend: Renderer)
{
this.renderer = rend;
}
ngAfterViewInit() {
}
addRow() {
this.renderer.createElement(this.builder.nativeElement,'div');
console.log(
`* ${this.builder.nativeElement.innerHTML}`);
}
}
HTML:
<div #builder class="row">
</div>
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a>
«Div» создается успешно, но мой вопрос: как я могу получить этот «div», созданный динамически?
Я пытаюсь получить его ссылку, чтобы я мог также создать в нем детей. Например: этот div является строкой, а затем я хотел бы добавить туда столбцы.
Большое спасибо за помощь!
Update 1
Мой исходный код это один
Компонент:
import { Component, ViewChild, ElementRef, Renderer} from '@angular/core';
@Component({
selector: 'c3',
template: `<h2>c3</h2>`
})
export class C3 {
}
@Component({
moduleId: module.id,
selector: 'my-row',
templateUrl: 'row.component.html',
styles: [
`.row:hover {
border: 3px dashed #880e4f ;
}
`
]
})
export class RowComponent {
colIndex: number = 0;
colList: Object[] = [];
rowId: number;
addColumn() {
this.colList.splice(this.colIndex, 0, ColumnComponent);
this.colIndex++;
}
removeColumn(colIdx: number) {
this.colList.splice(colIdx, 1);
}
setRowId(rowId: number) {
this.rowId = rowId;
}
}
@Component({
moduleId: module.id,
selector: 'my-column',
templateUrl: 'column.component.html',
styles: [
`.col:hover {
border: 3px solid #304ffe;
}
`
]
})
export class ColumnComponent {
row: RowComponent;
constructor(row: RowComponent) {
this.row = row;
}
removeColumn(colIdx: number) {
this.row.colList.splice(colIdx, 1);
}
}
@Component({
moduleId: module.id,
selector: 'my-site-designer',
templateUrl: 'sitedesigner.component.html',
styles: [`
nav {
height: 0px;
}
.side-nav {
width: 250px;
margin-top: 63px;
}
li.active {
color: #FFFFFF;
background-color: #1A237E;
}
li.active > a {
color: #FFFFFF;
background-color: #1A237E;
}
li.active > a > i{
color: #FFFFFF;
background-color: #1A237E;
}
/*
li.active i {
color: #FFFFFF;
background-color: #1A237E;
}
*/
`],
//template: `<p> teste teste</p>`
})
export class SiteDesignerComponent {
@ViewChild('builder') builder:ElementRef;
elementIndex: number = 0;
colIndex: number = 0;
list: Object[] = [];
colList: Object[] = [];
ngAfterViewInit() {
}
addRow() {
this.list.splice(this.elementIndex, 0, RowComponent);
this.elementIndex++;
}
remove(idx: number) {
this.list.splice(idx, 1);
}
}
HTML для HTML SiteDesignerComponent
<div #builder class="row">
<div class="s1 teal lighten-2">
<p class="flow-text">teste do html builder</p>
<div *ngFor="let row of list; let idx = index" >
<p class="flow-text">Linha {{idx}}</p>
<dcl-wrapper [type]="row"></dcl-wrapper>
<a class="btn-floating btn-small waves-effect waves-light purple" (click)="remove(idx)"><i class="material-icons">remove</i></a>
</div>
</div>
</div>
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a>
для RowComponent
<div #row class="row" id="{{rowId}}">
<div class="s12 teal lighten-2">
<p class="flow-text">adding a row </p>
</div>
<div id="colunas" *ngFor="let col of colList; let colIndex = index">
<dcl-wrapper [type]="col"></dcl-wrapper>
<!--a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a-->
</div>
<a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a>
</div>
HTML для ColumnComponent
<div class="col s4 purple lighten-2">
<p class="flow-text">adicionando coluna ....</p>
<a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a>
</div>
Если добавить две строки: первая с одной колонкой и второй с тремя столбцами, а затем, если удалить первую строку, она сохраняет неправильные столбцы (создано во второй строке). Я знаю, что что-то не так в том, как я работаю с объектными массивами, но я все еще не могу понять.
Спасибо за помощь!
Вам нужно только '* ngFor' добавить столбцы, проверить сайт angular.io. – Supamiu
Где RowComponent получает 'colList'? –
Он заполняется методом addColumn. Я имею в виду: в классе SiteDesginerComponent мы можем добавлять строки (RowComponent). В классе RowComponent можно добавлять столбцы (ColumnComponent). То же самое с методами «удалить». – Marrone