有沒有辦法在另一個組件中使用變量 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>