В Angular я хочу проецировать ( Transclude ) nativeElement на другой компонент без использования innerHTML.
В настоящее время я пытаюсь сделать это, используя ngComponentOutlet , используя дочерний компонент с ng-содержимым .
Я хочу загрузить компонент и отправить html-данные, чтобы он был обработан, поэтому мне не нужно использовать innerHTML для компиляции его в HTML.
Причина этого в том, что innerHTML теряет привязки .
Это моя попытка:
Мой родительский компонент:
import { Component, ContentChildren, QueryList } from '@angular/core';
import { TableRowComponent } from '../table-row/table-row.component';
import { TableCellComponent } from '../table-cell/table-cell.component';
@Component({
selector: 'ls-table-body',
template: `
<ng-container>
<tr ls-table-row *ngFor="let row of rows">
<ng-container *ngFor="let cell of cells">
<ng-container *ngComponentOutlet="tableCellComponent; content: [[cell.elem.nativeElement]]"></ng-container>
</ng-container>
</tr>
</ng-container>
`,
styleUrls: ['./table-body.component.scss']
})
export class TableBodyComponent {
@ContentChildren(TableRowComponent) rows: QueryList<TableRowComponent>;
@ContentChildren(TableCellComponent) cells: QueryList<TableCellComponent>;
public tableCellComponentComponent = TableCellComponent;
}
Мой дочерний компонент с именем TableCellComponent:
import { Component, HostBinding, Input, ContentChildren, ViewEncapsulation, QueryList } from '@angular/core';
@Component({
selector: '[ls-table-cell]',
template: `
<ng-content></ng-content>
`,
styleUrls: ['./table-cell.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TableCellComponent {
@HostBinding() @Input('class') classList = 'ls-table-cell';
@ContentChildren(TableCellComponent) cells: QueryList<TableCellComponent>;
@Input() span: number;
@Input() data: any;
}
Результат, который я ищу:
Я собираюсь скомпилировать HTML - поскольку я не могу использовать innerHTML из-за удаления привязок - поэтому я выбрал решение ngComponentOutlet с использованием ng-контента - так как я считаю, что компилирует мой HTML, который я передаю, используя ячейку .elem.nativeElement.
Я также открыт для альтернатив