Question

基本上不这样做：

class Controller implements AfterViewInit{
  @ViewChild(IconComponent)
  iconComponent: IconComponent;

  ngAfterViewInit() {
    iconComponent.save();
  }

}

我想要一个这样的组件：

class Controller implements AfterViewInit{

  ngAfterViewInit() {
    const iconComponent = someRef.get(IconComponent); // where to get this component from
    iconComponent.save()
  }

}

我该如何实现？

我问这个问题是因为我在运行时而不是编译时获得了组件类型。

Answer 1

为什么不使用提供的ComponentFactoryResolver创建组件？

通过这种方式，您可以获取其componentRef并管理其实例。

这里是ComponentFactoryResolver的文档，您可以在其中找到很好的实现example。

Answer 2

您可以拥有一个注入令牌。即使类型会导致您出错（因此可以强制转换为任何类型），这仍然可行：

@ViewChild(YOUR_TOKEN as any)
component: YourAbstractClass;

或者，如果您使用某个模板引用变量将它们全部标记出来

@ViewChild('some', {read: YOUR_TOKEN})
component: YourAbstractClass;

从抽象类派生的所有组件都应提供以下令牌：

@Component({
    selector: 'your-component',
    templateUrl: './yourComponent.template.html',
    styleUrls: ['./yourComponent.style.less'],
    providers: [
        {
            provide: YOUR_TOKEN,
            useExisting: forwardRef(() => YourComponent ),
        },
    ],
})
export class YourComponent extends YourAbstractClass {

这样，您还可以将它们全部注入指令中。

如何动态获取子组件而不是使用@ViewChild

2 个答案: