时间戳

首页 > 解决方案 > 如何将一个组件选择器传递给另一个组件？

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>

child.component.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();

上面的代码工作正常，没有任何问题。

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

更新代码

app.component.html

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

上面的代码也可以正常工作。

但在这里我的问题是我需要将“选择器”gene-child传递给全局组件，所以我做了以下操作，但它给出了错误，

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

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

app.component.ts

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

export class ....{

    geneChlid = GeneChildComponent;

app.component.html

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

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

标签： angularprimeng

解决方案

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

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>

bio-tables.component.html
<div>
  <ng-container *ngTemplateOutlet="rowExpansionTpl; context: {params: {gene: 'anything'}}"></ng-container>
</div>

推荐阅读