Angular2中的ViewChildren装饰器可以处理接口吗？

按照我对Angular 2的理解，

ViewChildren

decorator允许组件获取对其他组件或指令的查询。当我知道组件的特定类型时，我可以在Typescript中使用它，但是当我只知道组件的接口时，我希望能够获得

QueryList

。这样，我就可以遍历视图组件

例如，在组件中，我可能有以下内容：

@ViewChildren(Box) shapes: QueryList<Box>;

@ViewChildren（Box）形状：QueryList；

其中Box是一个具体的TypeScript类。我想要的是：

@ViewChildren(IShape) shapes: QueryList<IShape>;

@ViewChildren（IShape）形状：QueryList；

---

其中，

IShape

是一个Box或其他组件可以实现的接口。这样，视图可以非常动态，我的代码仍然可以工作。是否有建议的方法来处理此问题？

否，接口信息在运行时不存在，因此无法用于查询实现特定接口的不同组件

仅支持单个类型或模板变量列表，如

@ViewChildren('a,b,c,d') children;

<div #a>a</div>
<div #b>a</div>
<div #c>a</div>

<div #d>a</div>
<div #d>a</div>

<div #e>a</div>

@ViewChildren（'a，b，c，d'）子对象；
A.
A.
A.
A.
A.
A.

---

在

children

中会产生5个引用，事实上，有一种方法可以做一些与您正在尝试做的事情类似的事情，尽管可能不使用Typescript接口，因为Günter Zöchbauer认为，一旦代码被传输到javascript，它们就不存在了

但是，您可以使用父类。父类可能是一个抽象类。现在我考虑一下，如果接口被传输到运行时名称空间中，那么它们也应该工作，我不知道它们是否工作

@组件({
选择器：'square'，
提供者：[提供（形状，使用现有：forwardRef（（）=>Square）]
})
类Square扩展形状{}

请参阅此讨论

现在，我想在下面为像我这样使用es5的人留下我自己的例子，并且为了更彻底的用例演示。我试图平衡额外细节的数量，这样这个例子作为一个整体是有意义的，而不会变得多余

如果你要否决我的离题投票，请停止阅读。

我需要在仪表板组件中执行一些自定义调整大小逻辑，我希望只有在父仪表板组件中执行自定义调整大小逻辑后，几种不同类型的图表指令才能重新显示它们自己。我的一些图表实际上是组件，不会引起任何问题。您还需要执行以下模式吗es5中的rn工作是标准的。您不需要将app.Renderable包含在提供给您的NgModule的提供者列表中

renderable.class.js

（功能（应用程序）{
app.Renderable=ng.core.Class({
构造函数：[函数Renderable（）{}]，
呈现：函数（）{}
});
})（window.app | |（window.app={}））；

chart-one.directive.js

（功能（应用程序）{
app.ChartOneDirective=ng.core.Directive({
选择器：“画布[图表一]”，
输入：['config:chart one']，
供应商：[{
提供：应用程序可渲染，
useExisting:ng.core.forwardRef（函数（）{
返回app.chartone指令；
}),
}]
}).类({
扩展：app.Renderable，
构造函数：[/*injections*/函数ChartOneDirective（/*injections*/）{
//做事
}],
//其他方法
render:function（）{
//绘制图表
}
});
})（window.app | |（window.app={}））；

chart-two.directive.js

（功能（应用程序）{
app.ChartTwoDirective=ng.core.Directive({
选择器：“画布[图表二]”，
输入：['config:chart two']，
供应商：[{
提供：应用程序可渲染，
useExisting:ng.core.forwardRef（函数（）{
返回app.charttwo指令；
}),
}]
}).类({
扩展：app.Renderable，
构造函数：[/*injections*/函数ChartTwoDirective（/*injections*/）{
//做事
}],
//其他方法
render:function（）{
//绘制图表
}
});
})（window.app | |（window.app={}））；

dashboard.component.js

（功能（应用程序）{
app.DashboardComponent=ng.core.Component({
选择器：'仪表板组件'，
templateUrl:'components/dashboard/dashboard.component.html'，
主持人:{
'（window.resize）''rerender（）'，
},
查询：{
可渲染：新的ng.core.ViewChildren（app.Renderable），
//用于调整大小的其他视图子项
}
}).类({
构造函数：[/*injections*/函数仪表板组件（/*injections*/）{
//做事
}],
调整大小：函数（）{
//在dom中自定义大小
},
//其他方法
重新渲染器：函数（）{
这是resize（）；
this.renderables.forEach（函数（r）{
r、 render（）；
});
}
});
})（window.app | |（window.app={}））；

dashboard.component.html

---

现在，在es5 javascript中，实际上没有必要扩展Renderable类以使其工作。此外，您可以在提供程序列表中放置多个提供程序，从而允许您的组件或指令查询我的多个令牌。因此，您可以说您可以“实现”多个接口为了以经典javascript方式进行ViewChild选择，实际上没有任何保证。

应该可以查询常见的超类