Question

我有一个如下指令的对话框

@Directive({
  selector: '[dialogAnchor]'
})
export class DialogAnchorDirective {
    constructor(
        private viewContainer: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {}

    createDialog(dialogComponent: { new(): DialogComponent }): ComponentRef<DialogComponent> {
        this.viewContainer.clear();

        const dialogComponentFactory =
          this.componentFactoryResolver.resolveComponentFactory(dialogComponent);
        const dialogComponentRef = this.viewContainer.createComponent(dialogComponentFactory);

        dialogComponentRef.instance.close.subscribe(() => {
            dialogComponentRef.destroy();
        });
        // setTimeout( () => {
        //   dialogComponentRef.destroy();
        // }, 5000);
        return dialogComponentRef;
    }
}

通过使用这个我正在动态加载DialogComponent 我在我的应用程序组件中调用对话框Anchor，如下所示

this.dialogAnchor.createDialog(DialogComponent);

但在上面的行显示错误为 [ts]类型＆＃39; typeof DialogComponent＆＃39;不能分配给＆＃39; new（）=＆gt;类型的参数DialogComponent＆＃39;

DialogComponent代码位于

之下

import {Component, EventEmitter, Input, OnInit} from '@angular/core';
import { AppService } from './app.service';

@Component({
    selector: 'dlg',
    template: `
    <div class="dialog" [ngClass]="{'stu-success':dlgProps.msgType == 'success','stu-error':dlgProps.msgType == 'fail',
    'stu-warn':dlgProps.msgType == 'warn','stu-info':dlgProps.msgType == 'info'}" >
        <header><div class="title">Dialog box</div><div class="exit-button" (click)="onClickedExit()">x</div></header>
        <p>Hi XXXXXXXX</p>
    </div>
    `,
    styles: [`
        .dialog {
            width: 250px;
            position: absolute;
            border: 1px solid black;
            border-radius: 5px;
            overflow: hidden;
            position: fixed;
            left: calc(50% - 125px);
            top: 100px;
        }
        .dialog p {
            text-align: center;
        }
        .dialog header {
            border-bottom: 1px solid black;
            font-size: 12px;
            padding: 5px;
            display: flex;
        }
        .dialog header .title {
            flex-grow: 1;
            cursor: default;
        }
        .dialog header .exit-button {
            cursor: pointer;
            padding: 0 5px;
        }
        .stu-success {
          background: green;
        }
        .stu-error {
          background: #ff0000;
        }
        .stu-warn{
          background: orange;
        }
        .stu-info {
          background: yellow;
        }
    `]
})
export class DialogComponent implements OnInit {
    dlgProps: any;
    constructor(private appService: AppService) {
    }
    close = new EventEmitter();

    ngOnInit() {
      this.dlgProps = this.appService.dlgProps;
    }

    onClickedExit() {
        this.close.emit('event');
    }
}

Answer 1

当您将dialogComponent定义为new(): DialogComponent时，您会说：＆＃39;给我一个类型为DialogComponent的类，它具有无参数构造函数`

如你所见，事实并非如此，因为DialogComponent有一个带参数的构造函数。

因此，您可以将createDialog定义为：

createDialog(dialogComponent: { new(AppService): DialogComponent }): ComponentRef<DialogComponent>

或者你只是这样做：

createDialog(dialogComponent: Type<DialogComponent>): ComponentRef<DialogComponent>

在我看来更容易。这样，即使对于DialogComponent的派生类，您也可以创建对话框，而不管参数的数量。

如果您使用第二种方法，请务必从Type导入@angular/core。

Angular 4中动态组件加载的问题

1 个答案: