Angular中如何将组件作为另一个组件的@Input输入参数？

要把一个组件作为另一个组件的输入参数，思路和传递字符串/数字类似，但需要针对组件类型做一些调整，下面一步步给你讲清楚：

1. 在接收组件（子组件）中定义组件类型的@Input #

首先，你需要在子组件里声明一个@Input，类型设置为你要接收的组件类（注意是类本身，不是实例）。比如我们有一个要传入的TargetComponent，子组件（比如叫HostComponent）的代码如下：

import { Component, Input } from '@angular/core';
// 先导入你要接收的目标组件类
import { TargetComponent } from './target.component';

@Component({
  selector: 'app-host',
  template: `
    <!-- 后面会讲怎么渲染这个传入的组件 -->
    <ng-container *ngComponentOutlet="incomingComponent"></ng-container>
  `
})
export class HostComponent {
  // 定义输入，类型为目标组件的类类型
  @Input() incomingComponent: typeof TargetComponent;
}

2. 在父组件中传递组件类 #

在父组件里，你需要先导入目标组件，然后把它暴露给模板（这样模板才能访问到这个类），接着在模板中把组件类传给子组件：

父组件TS文件： #

import { Component } from '@angular/core';
import { TargetComponent } from './target.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 把组件类暴露给模板，让模板能引用到它
  public TargetComponent = TargetComponent;
}

父组件HTML模板： #

<!-- 直接把组件类作为输入传给子组件 -->
<app-host [incomingComponent]="TargetComponent"></app-host>

3. 渲染传入的组件（可选） #

如果你需要在子组件中渲染这个传入的组件，Angular提供了*ngComponentOutlet指令，它可以直接根据组件类渲染出对应的组件实例。

如果需要给渲染的组件传递输入参数，可以用inputs属性：

<ng-container 
  *ngComponentOutlet="incomingComponent; 
  inputs: { name: 'Hello from Parent' }"
></ng-container>

对应的TargetComponent需要有对应的@Input：

@Component({
  selector: 'app-target',
  template: `<div>{{ name }}</div>`
})
export class TargetComponent {
  @Input() name: string;
}

额外：手动创建组件实例（如果不需要自动渲染） #

如果你只是需要持有组件实例，而不是直接在模板渲染，可以通过ViewContainerRef和ComponentFactoryResolver手动创建：

import { Component, Input, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { TargetComponent } from './target.component';

@Component({
  selector: 'app-host',
  template: ''
})
export class HostComponent implements OnInit {
  @Input() incomingComponent: typeof TargetComponent;

  constructor(
    private vcr: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    // 解析组件工厂
    const componentFactory = this.cfr.resolveComponentFactory(this.incomingComponent);
    // 在ViewContainer中创建组件实例
    const componentRef = this.vcr.createComponent(componentFactory);
    // 设置组件的输入参数
    componentRef.instance.name = 'Hello from Host Component';
  }
}

注意事项 #

• 确保你要传入的组件已经在当前模块的declarations数组中声明（如果是独立组件则不需要）；Angular 9+使用Ivy后，不需要再把组件加到entryComponents里了。
• 如果你要传递的是多个不同类型的组件，可以把@Input的类型设置为Type<any>或者定义一个基类让所有目标组件继承，这样更灵活。

内容的提问来源于stack exchange，提问作者heliya rb