0

我正在编写一个 Angular 2 应用程序，并且有一个组件可以动态地将其他组件呈现到视图中，如https://blog.thecodecampus.de/angular-2-dynamically-render-components/中所述

该过程效果很好，但与其创建组件并立即从构造函数中销毁它，我宁愿将该逻辑放在类中的另一个函数中，该函数根据输入准确确定预期将哪个组件写入页面。存在切换显示哪些子组件的功能，因此我需要能够存储已解析的组件对象，以便稍后在其上调用 destroy() ，这导致我们手头的问题。

我想将此对象存储在私有属性中的类中，但我不知道如何键入它。以下是 .d.ts 文件必须描述最初实例化对象的 createComponent 函数的内容：

abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]): ComponentRef<C>;

现在一切都很好，但是当我传入需要解析的组件时，它有一个通用类型的 C 已解析，但我想将其指定为我可能传入的任何潜在组件。我不想要只是将我的财产指定为“任何”，因为那样的话，沿途的破坏将不会生效，例如

private _visibleElement: any;

现在，我确定我可以对数组进行类型保护并说它可以是 AppleComponent | 类型。香蕉组件 | CherryComponent 等，但我希望它更灵活，并且每次修改时都不必维护这些警卫，例如

private _visibleElement: ComponentRef<AppleComponent|BananaComponent|CherryComponent>;

我能想到的唯一另一种方法是为这些组件创建一个空接口，让每个组件实现它，然后让它组成类型，但是我只是将类型保护的维护切换到必须记住将接口应用于我将来添加的每个组件。

是否有任何其他方法可以让我指定一个对象是泛型类型，而不必事先指定该泛型类型是该类的什么？

谢谢！

4

1 回答 1

1

基本接口必须包含一些东西，如果它是空的，那么一切都将被接受：

interface MyComponent {}

function create<T extends MyComponent>(comp: T) {}

create(4); // no error
create({ key: "value" }); // no error

（操场上的代码）

使用这种方法不需要你记住在未来的类上应用接口，因为类型安全只会提醒你。
一旦你拥有所有组件的这个基本接口，然后确保你有依赖它的函数/类型，这样如果你引入一个新的组件类并且它没有实现，BaseComponent那么当你尝试使用它时编译器会抛出错误.
例如，您可以拥有：

type MyRef<T extends BaseComponent> = ComponentRef<T>;

然后在任何地方使用它：

abstract createComponent<C extends BaseComponent>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]): MyRef<C>;
于 2016-10-23T01:37:16.317 回答