Angular 角度NGX泳道图组件作为动态组件

我试图将一个NGX泳道图表组件传递到我的dialog实例中，但我一直收到以下错误：

ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property.

能够很好地显示图表的父组件：

<ngx-charts-pie-chart
    [results]="chartStats"
    [doughnut]="false" #pieChartComponent>
</ngx-charts-pie-chart>

....
@ViewChild('pieChartComponent') public pieChartComp: PieChartComponent;
...
public openChartDialog(): void {
   this.dialog.open(ChartDialogComponent, {
       width: environment.dialogWidth,
       data: this.pieChartComp,
   });
}

错误所在的对话框组件本身

export class ChartDialogComponent implements OnInit, OnDestroy {

    @ViewChild('target', { read: ViewContainerRef }) public vcRef: ViewContainerRef;

    // tslint:disable-next-line:no-any
    public componentRef: ComponentRef<any>;

    constructor(
        // tslint:disable-next-line:no-any
        @Inject(MAT_DIALOG_DATA) public data: any,
        private resolver: ComponentFactoryResolver,
    ) {
    }

    public ngOnInit(): void {
        const factory = this.resolver.resolveComponentFactory(this.data);
        this.componentRef = this.vcRef.createComponent(factory);
    }

    public ngOnDestroy(): void {
        if (this.componentRef) {
            this.componentRef.destroy();
        }
    }

}

导出类ChartDialogComponent实现OnInit、OnDestroy{
@ViewChild（'target'，{read:ViewContainerRef}）公共vcRef:ViewContainerRef；
//tslint:禁用下一行：无任何
公共componentRef:componentRef；
建造师(
//tslint:禁用下一行：无任何
@注入（MAT_DIALOG_DATA）公共数据：任意，
专用解析程序：ComponentFactoryResolver，
) {
}
public ngOnInit（）：void{
常量工厂=this.resolver.resolveComponentFactory（this.data）；
this.componentRef=this.vcRef.createComponent（工厂）；
}
公共Ngondestory（）：void{
if（this.componentRef）{
this.componentRef.destroy（）；
}
}
}

对话框html

<div mat-dialog-title
     cdkDrag
     cdkDragRootElement=".cdk-overlay-pane"
     cdkDragHandle>
    {{'STATS.CHART_DETAILS' | translate}}
</div>
<mat-dialog-content>
    <ng-template #target></ng-template>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-raised-button
            mat-dialog-close>
        <mat-icon>
            cancel_presentation
        </mat-icon>
        {{'COMMON.CLOSE' | translate}}
    </button>
</mat-dialog-actions>

{{'STATS.CHART_DETAILS'{124; translate}}
取消演示
{{'COMMON.CLOSE'| translate}}

我也尝试过使用cdk门户进行动态组件注入，但它不起作用，也显示了相同的错误

---

提前感谢

我可以帮助您使用不同的提供商，检查此项，不需要太复杂

在父组件中：

public openChartDialog(): void {
        const dialogPopup = new DialogInitializer(ChartDialogComponent);
        dialogPopup.setCustomData(this.pieChartComp);
        dialogPopup.setConfig({
              Width     : environment.dialogWidth, // ex. '500px',
              LayoutType: DialogLayoutDisplay.NONE // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        dialogPopup.setButtons([
            new ButtonMaker('OK', 'ok', ButtonLayoutDisplay.SUCCESS),
            new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
        ]);
    
       const subscription = dialogPopup.openDialog$().subscribe(resp => {
            console.log('dialog response: ', resp);
            subscription.unsubscribe();
        });
    }

export class ChartDialogComponent implements OnInit, OnDestroy {
    
    private subscriptions: Subscription = new Subscription();
    
    // Dependency Injection of the dialogBelonging in constructor is crucial.
    constructor(private dialogBelonging: DialogBelonging) {}
    
    ngOnInit(): void {
        // Check received data and other available features.
        console.log(this.dialogBelonging);
        
        // Subscribe to button listeners.
        this.subscriptions.add(
            // IDialogEventsController
            this.dialogBelonging.EventsController.onButtonClick$.subscribe((_Button) => {
                if (_Button.ID === 'ok') {
                    
                    // Do some logic and close popup.
                    this.dialogBelonging.EventsController.close();
                }
                else if (_Button.ID === 'cancel') {
                    
                    // Do some logic and close popup.
                    this.dialogBelonging.EventsController.close();
                }
            })
        );
        
        // Timeout emulates async data.
        setTimeout(() => {
            // Close the loader after data is ready.
            // IDialogEventsController
            this.dialogBelonging.EventsController.closeLoader();
        }, 1000);
    }
    
    ngOnDestroy(): void {
        // Care about memory and close all subscriptions.
        this.subscriptions.unsubscribe();
    }
}

在动态组件中：

public openChartDialog(): void {
        const dialogPopup = new DialogInitializer(ChartDialogComponent);
        dialogPopup.setCustomData(this.pieChartComp);
        dialogPopup.setConfig({
              Width     : environment.dialogWidth, // ex. '500px',
              LayoutType: DialogLayoutDisplay.NONE // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        dialogPopup.setButtons([
            new ButtonMaker('OK', 'ok', ButtonLayoutDisplay.SUCCESS),
            new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
        ]);
    
       const subscription = dialogPopup.openDialog$().subscribe(resp => {
            console.log('dialog response: ', resp);
            subscription.unsubscribe();
        });
    }

export class ChartDialogComponent implements OnInit, OnDestroy {
    
    private subscriptions: Subscription = new Subscription();
    
    // Dependency Injection of the dialogBelonging in constructor is crucial.
    constructor(private dialogBelonging: DialogBelonging) {}
    
    ngOnInit(): void {
        // Check received data and other available features.
        console.log(this.dialogBelonging);
        
        // Subscribe to button listeners.
        this.subscriptions.add(
            // IDialogEventsController
            this.dialogBelonging.EventsController.onButtonClick$.subscribe((_Button) => {
                if (_Button.ID === 'ok') {
                    
                    // Do some logic and close popup.
                    this.dialogBelonging.EventsController.close();
                }
                else if (_Button.ID === 'cancel') {
                    
                    // Do some logic and close popup.
                    this.dialogBelonging.EventsController.close();
                }
            })
        );
        
        // Timeout emulates async data.
        setTimeout(() => {
            // Close the loader after data is ready.
            // IDialogEventsController
            this.dialogBelonging.EventsController.closeLoader();
        }, 1000);
    }
    
    ngOnDestroy(): void {
        // Care about memory and close all subscriptions.
        this.subscriptions.unsubscribe();
    }
}

---

我没有正确地通过部件

打开对话框时，我正在执行以下操作：

data: this.pieChartComp,

但我必须这样做：

data: PieChartComponent,

---

这至少解决了初始错误的问题，但是没有传递绑定到组件的数据。但我想这是另一个问题。

只要在dialgo组件中使用ngAfterViewInit（）重新拼贴Ngoniit（），您在其中创建组件的引用，

ChartDialogComponent

我认为一切正常。@GaurangDhorda同样的错误。您能展示这个问题的工作演示吗@您将组件引用传递给对话框的方法不正确。您必须将模板引用传递给对话框，这是创建对话框的方法。这里是一个链接，你可以得到工作的例子@DenissM@GaurangDhorda我有一个单独的对话框组件，然后有另一个组件（动态）被注入到这个特定的组件中。