Angular CDK:如何在 ComponentPortal 中设置输入 [英] Angular CDK: How to set Inputs in a ComponentPortal

问题描述

我想使用材料 CDK 中的新 Portal 将动态内容注入表单的多个部分.

I would like to use the new Portal from material CDK to inject dynamic content in multiple part of a form.

我有一个复杂的表单结构，目标是有一个表单来指定子组件可以(或不)注入模板的多个位置.

I have a complex form structure and the goal is to have a form that specify multiple place where sub components could (or not) inject templates.

也许 CDK 门户不是最好的解决方案?

Maybe the CDK Portal is not the best solution for this?

我尝试了一些东西，但我确定这不是正确的做法:https://stackblitz.com/edit/angular-yuz1kg

I tried something but I am sure it is not the way of doing: https://stackblitz.com/edit/angular-yuz1kg

我也尝试过 new ComponentPortal(MyPortalComponent) 但我们如何在其上设置输入?通常类似于 componentRef.component.instance.myInput

I tried also with new ComponentPortal(MyPortalComponent) but how can we set Inputs on it ? Usually is something like componentRef.component.instance.myInput

推荐答案

您可以创建自定义注入器并将其注入您创建的组件门户.

You can create a custom injector and inject it to the component portal you create.

createInjector(dataToPass): PortalInjector {
    const injectorTokens = new WeakMap();
    injectorTokens.set(CONTAINER_DATA, dataToPass);
    return new PortalInjector(this._injector, injectorTokens);
}

CONTAINER_DATA 是由 -

export const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');

要使用创建的注入器，请使用 -

To consume created injector, use -

let containerPortal = new ComponentPortal(ComponentToPort, null, this.createInjector({
          data1,
          data2
        }));

overlay.attach(containerPortal);

overlay 是OverlayRef(即Portal Outlet)的一个实例

overlay is an instance of OverlayRef (Which is Portal Outlet)

在ComponentToPort里面，你需要注入创建好的注入器-

Inside ComponentToPort, you will need to inject the created injector -

@Inject(CONTAINER_DATA) public componentData: any

在此处了解更多相关信息.

这篇关于Angular CDK:如何在 ComponentPortal 中设置输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！