Angular 如何动态实现包含1-N个其他组件的可重用角度组件？

如何做到这一点，使容器组件不了解其包含的组件

我正在尝试开发一个通用的侧面板控件，它可以包含任何内容。每个组件都由选择器行中的图标表示，顶部和下方是垂直放置的组件。单击图标可滚动容器，使相应的组件可见

不同项目仅位于同一html中的静态示例如下：

  <mat-sidenav opened mode="side" position="end">
   <div class="sidewindow">
    <div class="header">
      <button  mat-icon-button (click)="scroll(properties)">
          <mat-icon>settings</mat-icon>
      </button>
      <button  mat-icon-button (click)="scroll(table)">
          <mat-icon>table_chart</mat-icon>
      </button>
      <button  mat-icon-button (click)="scroll(maintenance)">
          <mat-icon>gavel</mat-icon>
      </button>
    </div>
    <div class="content">
      <div #properties>
        <mat-card >
            <mat-card-title>Properties</mat-card-title>
              <form class="example-form">
                <mat-form-field class="example-full-width">
                  <input matInput placeholder="Favorite food" value="Sushi">
                </mat-form-field>

                <mat-form-field class="example-full-width">
                  <textarea matInput placeholder="Leave a comment"></textarea>
                </mat-form-field>
              </form>
            </mat-card>
      </div>
      <div  #table>
        <mat-card>
            <mat-card-title>Table</mat-card-title>
        <table mat-table [dataSource]="dataSource">
            <!-- Position Column -->
            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef> No. </th>
              <td mat-cell *matCellDef="let element"> {{element.position}} </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef> Name </th>
              <td mat-cell *matCellDef="let element"> {{element.name}} </td>
            </ng-container>

            <!-- Weight Column -->
            <ng-container matColumnDef="weight">
              <th mat-header-cell *matHeaderCellDef> Weight </th>
              <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="symbol">
              <th mat-header-cell *matHeaderCellDef> Symbol </th>
              <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </mat-card>
      </div>
      <div #maintenance>
          <mat-card>
              <mat-card-title>Maintenance</mat-card-title>
              <mat-card-subtitle>Subtitle</mat-card-subtitle>
              <p>The actual content</p>
              <p>The actual content 2</p>
              <p>The actual content 3</p>

          </mat-card>
      </div>
    </div>
  </div>
</mat-sidenav>

设置
图表
木槌
性质
桌子
不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}
维修
字幕
实际内容

实际内容2

实际内容3

根据您的需要，有多种方法：

使用

ng content

可以在侧面板组件中投影子组件

您可以使用

NgComponentOutlet

将组件动态附加到侧面板模板中，并使用控件插入自定义数据

使用可以动态实例化组件的

ComponentFactoryResolver

。

注：#2和#3要求组件在

entryComponents

数组，以便Angular在编译时了解它们 时间

---

我想你要找的是带有

ng内容的多段转写。例如，您可以检查以了解如何在Angular中执行此操作。为了拥有图标系统，您必须进行调整，但通过这种方式，您可以在面板中包含所需的任何组件。您的html可能如下所示：

<side-panel-component>
    <my-comp1></my-comp1>
    <my-comp2></my-comp2>
    <div class>...</div>
    ...
</side-panel-component>


...
...

我从未做过这样的事情，但我经常使用转义，我想我会尝试一下