通过将组件名称指定为输入参数，将 Angular 组件导入另一个组件

Question

我想创建一个由多个子组件组成的角度组件。最终我想创建一个大型可重用树组件，其节点具有不同的数据类型。对于每种数据类型，树组件导入指定节点显示方式的子组件。用户应该能够指定自定义组件来覆盖特定数据类型的默认组件。像这样的导入语法会很好：

<app-tree [customDateComp]="CustomDateComponent"></app-tree>

这可能是简化的 tree.component.html:

<ng-container *ngIf="!customDateComp">
 <app-default-date></app-default-date>
</ng-container>
<ng-container *ngIf="customDateComp">
 {{ customDateComp }}
</ng-container>

当然这还不行，因为组件是用语法导入的。下面的方法也不起作用，因为 angular 转义了它：

<app-tree [customDateComp]="'<app-custom-date></app-custom-date>'"></app-tree>

示例代码可以在这里找到： https://stackblitz.com/edit/angular-ivy-xghj5f?file=src/app/app.component.html

有谁知道如何通过将组件名称指定为输入参数来将 Angular 组件导入其他组件？或者有没有更好的方法来覆盖第三方组件的默认子组件？非常感谢！

Answer 1

这是你的stackblitz demo作品。

在可能的方法中，有一个门户（以及 @angular/cdk/portal 提供的实用程序）。

基本上，这就是您需要的：

1 - 接收组件的占位符（在本例中为 cdkPortalOutlet 设置）：

<ng-template [cdkPortalOutlet]="_compPortal"></ng-template>

2 - 一个门户（_compPortal，上图）插入你的门户出口：

_compPortal = new ComponentPortal<any>(MyCustomComponent);

就这些了。

在你的情况下（你在问题中链接的 stackblitz）你可以这样做：

0 - 导入 @angular/cdk/portal 模块：

import {PortalModule} from '@angular/cdk/portal';

@NgModule({imports: [ ... PortalModule ] ...}) export class AppModule { }

1 - tree.component.html

<ng-container *ngIf="!_compPortal">
 <app-date></app-date>
</ng-container>
<ng-container *ngIf="_compPortal">
  <ng-template [cdkPortalOutlet]="_compPortal"></ng-template>
</ng-container>

2 - tree.compoenent.ts

@Input() 
set customDateComp(customComp: any){
  this._compPortal = customComp ? new ComponentPortal(customComp) : null;
}
_compPortal: ComponentPortal<any>;

3 - app.component.ts

// Notice this is not `_comp: CustomDateComponent`.
// I'm setting up an attribute that receives the type so I can 
// make it available on the template
_comp = CustomDateComponent;

4 - app.component.html

<app-tree [customDateComp]="_comp"></app-tree>

Answer 2

您可以使用动态组件加载器https://angular.io/guide/dynamic-component-loader

通过将组件名称指定为输入参数，将 Angular 组件导入另一个组件

Import Angular Component into another Component by specifying the component name as input parameter

angular

typescript

angular-components

angular-template

在你的情况下（你在问题中链接的 stackblitz）你可以这样做：