使用Angular 15和CDK的ComponentPortal,可以动态地调用组件,但是在调用组件时需要传递参数的时候,该如何处理呢?一种解决方法是利用Angular CDK的portal-injector服务来注入需要的参数。下面是示例代码:
import { Component, ComponentFactoryResolver, Injector, ViewChild, ViewContainerRef } from '@angular/core';
import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
import { MyComponent } from './my-component';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
@ViewChild('portalContent', { read: ViewContainerRef })
private portalContent: ViewContainerRef;
constructor(
private portalInjector: Injector,
private componentFactoryResolver: ComponentFactoryResolver
) {}
open() {
const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const portal = new ComponentPortal(MyComponent, this.portalContent, this.portalInjector);
const componentRef = portal.attach(factory);
// Here we can inject parameters to the component
componentRef.instance.parameter = 'Hello World';
}
}
在上面的示例代码中,我们利用portal-injector服务来注入一个参数到MyComponent组件中。这个参数将会被传递到组件的constructor方法中。这是一个非常便捷的方法来动态地传递参数到一个动态组件中。