Question

我正在使用与此https://github.com/angular/angular/pull/11235类似的内容来渲染动态模态。

该指令有一个输入，它将类型作为它将呈现的Component：

    @Directive({ selector: '[ngComponentOutlet]' })
export class NgComponentOutlet implements OnChanges {
    @Input() ngComponentOutlet: Type<any>;
    @Input() ngOutletInjector: Injector;
    @Input() ngOutletProviders: Provider[];
    @Input() ngOutletProjectableNodes: any[][];

    @Output()
    ngOutletCreated = new EventEmitter<ComponentRef<any>>(false);

    constructor(
        private _cmpFactoryResolver: ComponentFactoryResolver,
        private _viewContainerRef: ViewContainerRef) { }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.hasOwnProperty('ngComponentOutlet')) {
            this._viewContainerRef.clear();

            if (this.ngComponentOutlet) {
                let injector = this.ngOutletInjector || this._viewContainerRef.parentInjector;

                if (Array.isArray(this.ngOutletProviders) && this.ngOutletProviders.length > 0) {
                    injector = ReflectiveInjector.resolveAndCreate(this.ngOutletProviders, injector);
                }

                const cmpRef = this._viewContainerRef.createComponent(
                    this._cmpFactoryResolver.resolveComponentFactory(this.ngComponentOutlet),
                    this._viewContainerRef.length, injector, this.ngOutletProjectableNodes);

                this.ngOutletCreated.emit(cmpRef);
            }
        }
    }
}

我想对可以像这样使用的组件强制执行一个接口，这样我就知道动态渲染的所有组件都有一定的功能，例如：

export interface ModalContent {
    close(): void;
}

所有将成为动态模态的组件都实现了这个：

@Component({
    ...
})
export class MyCustomModalComponent implements ModalContent {
    close() {
        ...
    }
}

然后我把它们放在一起

@Component({
    template: `<div [ngComponentOutlet]="component"></div>`,
})
export class AppComponent {
    private component: ModalContent;

    showModal() {
        this.component = MyCustomModalComponent; <-- I get the error here
    }
}

我的问题是我在AppComponent中收到以下错误：

Type 'typeof MyCustomModalComponent' is not assignable to type 'ModalContent'.
Property 'close' is missing in type 'typeof MyCustomModalComponent'.

我想这与我如何处理这些类型有关，但我现在确定问题是什么？

编辑我添加了整个指令以供参考

Answer 1

此代码显示component类型为ModalContent，这意味着它可以包含ModalContent的实例。

private component: ModalContent;

此代码指定类型Type的实例，而不是类型ModalContent

的实例

this.component = MyCustomModalComponent;

此代码符合类型注释

this.component = new MyCustomModalComponent();

但你不应该自己实例化组件，而是让Angulars DI为你做这件事。

不确定你实际上想要实现的目标。

<强>更新

如果您确实想要为该类型分配引用，那么这应该有效：

private component: Type<ModalContent>

使用接口强制输入typescript类型

1 个答案: