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

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

目前，我正在尝试使用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;
}

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;
}

我的父组件：

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;
}

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;
}

从'@angular/core'导入{Component，ContentChildren，QueryList}；
从“../table row/table row.component”导入{TableRowComponent}；
从“../table cell/table cell.component”导入{TableCellComponent}；
@组成部分({
选择器：“ls表体”，
模板：`
`,
样式URL:['./表体.component.scss']
})
导出类TableBodyComponent{
@ContentChildren（TableRowComponent）行：QueryList；
@ContentChildren（TableCellComponent）单元格：QueryList；
公共tableCellComponentComponent=TableCellComponent；
}

名为TableCellComponent的我的孩子组件：

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;
}

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;
}

import{Component，HostBinding，Input，ContentChildren，view封装，QueryList}来自'@angular/core'；
@组成部分({
选择器：“[ls表格单元格]”，
模板：`
`,
样式URL:['./表单元格.component.scss']，
封装：视图封装。无
})
导出类TableCellComponent{
@HostBinding（）@Input（'class'）classList='ls table cell'；
@ContentChildren（TableCellComponent）单元格：QueryList；
@Input（）span:number；
@输入（）数据：任意；
}

我期待的结果：

我希望编译HTML-因为我无法使用innerHTML，因为绑定被删除了-所以我选择使用ng内容的ngComponentOutlet解决方案-因为我相信编译我的HTML时使用cell.elem.nativeElement

---

我也对其他选择持开放态度

看看

@angular/cdk

：。它是由

@angular/material

团队开发的，并将ngComponentOutlet包装在一个更强大的api中。请给我一个门户示例-我以前尝试过，但无法让它工作@jpavel在我发布的链接上有一个示例：@jpavel我刚刚尝试过门户，它们不呈现html。例如：行[0]。elem.nativeElement.children[0]。innerHTML呈现为字符串而不是html。我不能使用[innerHTML]，因为使用它时绑定被删除。哦，现在我得到了你想要的。门户网站真的不这么做。你不可能尝试另一种方法吗？事实上，@angular的设计并没有考虑开发人员手动解析字符串以从中生成组件。它是由

@angular/material

团队开发的，并将ngComponentOutlet包装在一个更强大的api中。请给我一个门户示例-我以前尝试过，但无法让它工作@jpavel在我发布的链接上有一个示例：@jpavel我刚刚尝试过门户，它们不呈现html。例如：行[0]。elem.nativeElement.children[0]。innerHTML呈现为字符串而不是html。我不能使用[innerHTML]，因为使用它时绑定被删除。哦，现在我得到了你想要的。门户网站真的不这么做。你不可能尝试另一种方法吗？事实上，@angular的设计并没有考虑开发人员手动解析字符串以便从中生成组件。