В Angular я хочу проецировать nativeElement на другой компонент без использования innerHTML - PullRequest
Новая
       27

В Angular я хочу проецировать nativeElement на другой компонент без использования innerHTML

1 голос
/ 23 мая 2019

В 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.

Я также открыт для альтернатив

...