Динамически внедрить компонент в динамически добавленные элементы в Angular2 и Gridster2
Я использую библиотеку angular-gridster2 для добавления элементов на страницу. Я хочу загрузить контент в эти элементы, которые добавляются. Элементы размещаются через ngFor
и добавлены / удалены через сервис. Я смотрел на ComponentFactoryResolver
а также componentRef
для загрузки динамического контента, но все учебники показывают, как сделать это в одной статической цели, используя что-то вроде <div #container></div>
, Тем не менее, мой это:
<div id="grid">
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard;let i = index;">
<div class="grid-header drag-handle">
<span class="handle-icon"><i class="material-icons">open_with</i></span>
<span class="close-icon" (click)="removePanel(item)"><i class="material-icons">close</i></span>
</div>
У меня есть компонент для выбора "навигации", который добавляет элемент на страницу, которую я хочу передать, а также тип, который определяет, что динамически загружается в добавленный элемент. В настоящее время я прохожу размер (click)="add(large)"
который помещает массив "большого" размера на сервер для размещения элемента на странице:
add(size,type){
size = size || 'default';
let newSize = this.sizeOptions[size];
if(!this.gridElements.options.api.getNextPossiblePosition(newSize)) {
alert('hey, no can do, buddy!');
return false;
}
let tDate = new Date();
let tSize = {
...newSize
};
this.dashboard.push(tSize);
this.gridElements.changeGrid(this.dashboard);
}
мой app.component.html выглядит так:
<mat-sidenav-container>
<div id="page-content">
<app-header></app-header>
<app-navigation></app-navigation>
<app-grid></app-grid>
<app-alerts #alertwindow2></app-alerts>
</div>
</mat-sidenav-container>
Снова, app-navigation
а также app-grid
связаны через grid-component.service
чтобы позволить add
в навигации, чтобы передать элемент, добавленный в grid
, Я хочу разместить динамический компонент на каждом элементе сетки, указанном в клике, например (click)="add('large','comp1')"
затем передает это службе, которая, в свою очередь, обрабатывает запрос и загружает содержимое во вновь созданный элемент сетки.