有没有办法在另一个组件中使用变量 Angular 组件，并将数据传递给该变量组件？

Question

我想要的是

假设 component2 是我希望能够在其中使用可变组件的组件。例如，我们将使用的可变组件是 component1。

component1.html： <div>Hi, I'm comp 1. Data: {{data}}</div>

component2.html： <div>Hi, I'm comp 2. Variable component: <variableComponent [data]="data"></variableComponent></div>

在某处使用component2： <component2 [variableComponent]="component1" ></component2>

我正在尝试做的事情

我正在关注 Angular 可扩展表示例，其中可以单击每一行，使其展开以显示有关该行的详细信息。 https://material.angular.io/components/table/examples#table-expandable-rows

我已经制作了一个可以向其中传递数据的通用表格组件，并且我向其中添加了可扩展的行，但我也希望能够向其中传递一个详细信息组件，以便我们的开发人员可以制作不同的细节不同对象的组件，以便我们可以将这些详细组件用于不同的表。 （即，您可以制作一个元素详细信息组件，如果您正在制作一个元素表，就像在链接的示例中一样，然后将该组件传递给表格组件，则可以使用该组件）

我尝试使用 [innerHTML]，所以我可以传递一个变量 HTML 字符串以呈现为详细信息面板，这样我就可以很容易地粘贴一个组件和参数。 但它看起来不起作用，可能是因为 [innerHTML] 正在跳过 Angular 所做的一些事情。

表组件 html （您可能不需要阅读此内容来回答问题）：

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="matData" matSort [matSortActive]="tableKeys[0]" matSortDirection="asc" matSortDisableClear multiTemplateDataRows>
  <ng-container *ngFor="let key of tableKeys;" [matColumnDef]="key" >
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{dataKeysToHeadersDictionary[key]}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row[key]}}</mat-cell>
  </ng-container>

  <ng-container [matColumnDef]="'expandButtonColumnDef'">
    <mat-header-cell *matHeaderCellDef>:</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span  (click)="expandedRow = expandedRow === row ? null : row">::</span>
    </mat-cell>
  </ng-container>

  <ng-container [matColumnDef]="'expandedDetail'">
    <mat-cell class="detailCell" *matCellDef="let row;" [attr.colspan]="tableKeys.length">
      <div class="detailCellDiv" [@detailExpand]="row == expandedRow ? 'expanded' : 'collapsed'">
        <!-- vvv THIS IS THE IMPORTANT ROW vvv -->
        <div [innerHTML]="getRowDetail(row)"></div>
        <!-- ^^^ THIS IS THE IMPORTANT ROW ^^^ -->
      </div>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="tableKeys.concat('expandButtonColumnDef')"></mat-header-row>
  <mat-row *matRowDef="let row; columns: tableKeys.concat('expandButtonColumnDef')"></mat-row>
  <mat-row class="detailRow" *matRowDef="let row; columns: ['expandedDetail']"></mat-row>
</mat-table>

表组件 typescript：

// Right now, this is returning a static string with html to use the account-details component
// But eventually I want this to be a dynamic or variable string so I can use whatever component I give to the table-component
getRowDetail(row): any {
  return '<app-account-details style="display: flex;" [account]="row"></app-account-details>';
}

我想一种解决方法是制作一个通用细节组件，然后在 html 中放置一个 ngSwitch，其中包含我最终制作的每个细节组件，但这是一种解决方法。

编辑：解决方法

所以，问题是我希望能够将组件 1“传递”到组件 2，但也可以将数据从组件 2 传递到组件 1。 ng-content 似乎不允许我这样做，所以我创建了一个通用变量组件，您可以指示它显示您想要的任何组件，并将数据也传递给它。

通用变量组件 typescript：

...
@Input() data: any;
@Input() componentName: string;
...

通用变量组件。html：

<ng-container *ngIf="componentName === 'c1'"><component1 [data]="data"></component1></ng-container>
<!-- Repeat the above with whatever components you end up needing -->

component1.html： <div>Hi, I'm comp 1. Data: {{data}}</div>

component2.html： <div>Hi, I'm comp 2. Variable component: <generic-variable-component [data]="data" [componentName]="varCompName"></generic-variable-component></div>

在某处使用 component2： <component2 [varCompName]="c1" ></component2>

这似乎按我想要的方式工作。 不利的一面是，每次我添加一种我想在这种情况下使用的新型组件时，我都必须编辑 generic-variable-component.html，但这真的没什么大不了的，你只需复制那行。 可能有更好的方法来做到这一点，包括内容注入和指令，但我不确定如何做到这一点。

另外，我对在 stackoverflow 上发帖有点陌生，所以我不确定是否应该将我的问题标记为已回答，因为我的解决方法是。 我想现在我会留下它，以防有人想用“正确”的答案猛扑过来。

Answer 1

我认为您应该阅读有关内容投影的内容。 它的作用是为您提供一种将您想要的任何内容作为参数传递给组件的方法。 例如：

父组件

<component1>
    <componentAsAParameter></componentAsAParameter>
</component1>

在 component1 Html 中，您可以使用 ng-content 作为 aa 参数传递的组件

<div>
    whatever you want
    <ng-content></ng-content>
</div>

Html 在运行时看起来像：

<div>
    whatever you want
    <componentAsAParameter></componentAsAParameter>
</div>