Question

在Angular中，我想在不使用innerHTML的情况下将 nativeElement 投影（ Transclude ）到另一个组件。

当前，我正在尝试使用 ngComponentOutlet 并使用具有 ng-content 的子组件来做到这一点。

我想加载组件并将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-因此我选择了使用ng-content的ngComponentOutlet解决方案-因为我相信使用单元格可以编译HTML .elem.nativeElement。

我也愿意选择

在Angular中，我想不使用innerHTML将nativeElement投影到另一个组件

0 个答案: