Angular 如何将一个组件选择器传递给另一个组件？

我正在尝试创建全局组件，以便其他开发人员可以将此组件用于他们的项目

这里的目标是，我有我的本地组件app.component.ts，它有一个子组件。我已经捆绑了全局组件并保存在node_modules文件夹中

app.component.html

<p-table #dt [value]='genes' [columns]="tableHeader" dataKey="geneName">

    <ng-template pTemplate="header">
        <th></th>
        <th>Gene</th>
        <th>Position</th>
        <th>Value</th>
    </ng-template>

    <ng-template pTemplate="body"  let-columns="columns" let-expanded="expanded" let-gene>
            <tr [pSelectableRow]="gene">
            ...
            </tr>
    </ng-template>

    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
        <tr>
            <gene-child [geneData]="rowData" (geneSelection)="selection()"> </gene-child>
        </tr>
    </ng-template>

</p-table>

<bio-tables [tableData]="genes" [header]="tableHeader"></bio-tables>

<bio-tables [tableData]="genes" [header]="tableHeader" [rowExpansionSelector]="geneChild"></bio-tables>

以上代码工作正常，没有任何问题

---

现在我正在创建全局组件来处理priemng表，从父组件我只需要传递头和数据

更新代码

app.component.html

<p-table #dt [value]='genes' [columns]="tableHeader" dataKey="geneName">

    <ng-template pTemplate="header">
        <th></th>
        <th>Gene</th>
        <th>Position</th>
        <th>Value</th>
    </ng-template>

    <ng-template pTemplate="body"  let-columns="columns" let-expanded="expanded" let-gene>
            <tr [pSelectableRow]="gene">
            ...
            </tr>
    </ng-template>

    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
        <tr>
            <gene-child [geneData]="rowData" (geneSelection)="selection()"> </gene-child>
        </tr>
    </ng-template>

</p-table>

<bio-tables [tableData]="genes" [header]="tableHeader"></bio-tables>

<bio-tables [tableData]="genes" [header]="tableHeader" [rowExpansionSelector]="geneChild"></bio-tables>

我尝试将基因子组件存储到一个变量中，并尝试传递它，如下面的代码所示

应用程序组件.ts

import { ConfirmationService } from 'primeng/api';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'gene-child',
    templateUrl: './gene.html',
})
export class GeneChildComponent implements OnInit {
    @Input() geneName: any;
    @Output() geneSelection =  new EventEmitter(); 

import { GeneChildComponent } from './gene-child.component.ts';
...

export class ....{

    geneChlid = GeneChildComponent;

app.component.html

<p-table #dt [value]='genes' [columns]="tableHeader" dataKey="geneName">

    <ng-template pTemplate="header">
        <th></th>
        <th>Gene</th>
        <th>Position</th>
        <th>Value</th>
    </ng-template>

    <ng-template pTemplate="body"  let-columns="columns" let-expanded="expanded" let-gene>
            <tr [pSelectableRow]="gene">
            ...
            </tr>
    </ng-template>

    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
        <tr>
            <gene-child [geneData]="rowData" (geneSelection)="selection()"> </gene-child>
        </tr>
    </ng-template>

</p-table>

<bio-tables [tableData]="genes" [header]="tableHeader"></bio-tables>

<bio-tables [tableData]="genes" [header]="tableHeader" [rowExpansionSelector]="geneChild"></bio-tables>

---

上面的代码也不起作用。我不知道如何将选择器传递给子组件。

您可以传递模板，然后根据需要进行渲染

app.component.html
<bio-tables ... [rowExpansionTpl]="geneTpl">
</bio-tables>
<ng-template #geneTpl let-params="params">
  <gene-child [geneName]="params.gene" (geneSelection)="selection(params)"> </gene-child>
</ng-template>

export abstract class GenericChild {
  abstract geneName: any;
  abstract geneSelection: EventEmitter<any>;
}

app.component.html

bio-tables.component.html

您可以传递模板，然后根据需要进行渲染

app.component.html
<bio-tables ... [rowExpansionTpl]="geneTpl">
</bio-tables>
<ng-template #geneTpl let-params="params">
  <gene-child [geneName]="params.gene" (geneSelection)="selection(params)"> </gene-child>
</ng-template>

app.component.html

bio-tables.component.html

据我所知，您希望将动态组件传递给您的

bio tables

组件，如果是这样，您可以尝试执行以下操作：

创建和抽象类让我们把它称为

GenericChild

，在这里定义您对组件的期望

export abstract class GenericChild {
  abstract geneName: any;
  abstract geneSelection: EventEmitter<any>;
}

我们将创建一个包装器组件，以便访问

let rowData

，此包装器将创建一个子组件（

GeneChildComponent

，即动态组件）。为此，我们需要一个

ng container

作为

ViewContainerRef

并且我们将从GenericChild扩展

要创建组件，我们将使用

ComponentFactoryResolver

模板：

组成部分：

export class ChildWrapper extends GenericChild {
  @Input()
  genericChild: Type<GenericChild>;
  @Input()
  geneData: any;
  @Output()
  geneSelection: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild("child", { read: ViewContainerRef })
  childsContainer: ViewContainerRef;

  constructor(
    private factory: ComponentFactoryResolver,
    private cdr: ChangeDetectorRef
  ) {
    super();
  }
   
  //create the component in the container, and set the values of the instance.
  ngAfterViewInit(): void {
    const componentFactory = this.factory.resolveComponentFactory(
      this.genericChild
    );
    const ref = this.childsContainer.createComponent(componentFactory);

    ref.instance.geneData = this.geneData;
    ref.instance.geneSelection.subscribe(event => {
      this.geneSelection.emit(event);
    });
    this.cdr.detectChanges();
  }
}

导出类ChildWrapper扩展了GenericChild{
@输入（）
genericChild：类型；
@输入（）
基因数据：任何；
@输出（）
geneSelection:EventEmitter
据我所知，您希望将动态组件传递给您的
生物表
组件，如果是这样，您可以尝试执行以下操作：

创建和抽象类让我们把它称为
GenericChild
，在这里定义您对组件的期望

export abstract class GenericChild {
  abstract geneName: any;
  abstract geneSelection: EventEmitter<any>;
}

我们将创建一个包装器组件，以便访问
let rowData
，此包装器将创建一个子组件（
GeneChildComponent
，即动态组件）。为此，我们需要一个
ng contaier
作为
ViewContainerRef
，并且我们将从GenericChild扩展

要创建组件，我们将使用
ComponentFactoryResolver

模板：



组成部分：

export class ChildWrapper extends GenericChild {
  @Input()
  genericChild: Type<GenericChild>;
  @Input()
  geneData: any;
  @Output()
  geneSelection: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild("child", { read: ViewContainerRef })
  childsContainer: ViewContainerRef;

  constructor(
    private factory: ComponentFactoryResolver,
    private cdr: ChangeDetectorRef
  ) {
    super();
  }
   
  //create the component in the container, and set the values of the instance.
  ngAfterViewInit(): void {
    const componentFactory = this.factory.resolveComponentFactory(
      this.genericChild
    );
    const ref = this.childsContainer.createComponent(componentFactory);

    ref.instance.geneData = this.geneData;
    ref.instance.geneSelection.subscribe(event => {
      this.geneSelection.emit(event);
    });
    this.cdr.detectChanges();
  }
}

导出类ChildWrapper扩展了GenericChild{
@输入（）
genericChild：类型；
@输入（）
基因数据：任何；
@输出（）
geneSelection:EventEmitter
为什么需要传递“选择器”作为输入？您想用它实现什么？您想使行扩展动态吗？是..我想进行动态行扩展。为什么需要传递“选择器”作为输入？您想用它实现什么？您想使行扩展动态吗？是的..我想进行动态行扩展。谢谢您的回答。这里我需要传递动态值，即，我需要将每行数据发送到子组件。这是解决方案。在上下文
上下文：{params:{anythingYouWant}中传递参数
谢谢您的回答。这里我需要传递动态值，即，我需要将每行数据发送到子组件。这就是解决方案。在context
context:{params:{anythingYouWant}中传递参数