如何将角度组件[的选择器]键入变量？答案

【问题标题】：How to type an angular component['s selector] to a variable?如何将角度组件[的选择器]键入变量？
【发布时间】：2020-09-10 20:28:16
【问题描述】：

我正在将一个自定义的多拖放功能构建到一个 Angular 应用程序中，并且在其中一个服务中，我迭代了一组主机组件 (<app-cell>)。

当我遍历 's 的数组时，有没有办法为我的迭代变量分配“自定义类型”？换句话说，如何将 tile 的类型限制为 app-tile？

这不是确切的代码，但或多或少说明了我想要实现的目标。

let selectedTiles = Array.from(document.querySelectorAll('app-tile'));

selectedTiles.map((tile: **WHAT GOES HERE?**) => {
  // do something with tile
}

我以前使用模型来“自定义键入”具有特定键的简单对象，但我不知道如何尝试将分配范围缩小到我自己的角度组件。

从我自己的谷歌搜索来看，TemplateRef 或指令似乎走在正确的道路上，但我对任何一个的理解都是模糊的，并且可以使用一些方向来确定我可以使用什么类型！谢谢！

【问题讨论】：

标签： angular typescript components selector typescript-typings

【解决方案1】：

这真的取决于“selectedTiles”是什么类型。它的类型类似于Array<T>，假设这里是某种类型{ id: number, dataset: Array<string> }。由于您正在对 selectedTile 数组进行映射，因此每个元素（此处为“tile”）的类型均为 T。

更具体地说，您能否分享您正在使用的服务。另外，如果可以的话，你可以分享代码链接

【讨论】：

您好，感谢您的回复！该功能本身并不真正相关。 tile 是，从 document.querySelector 查询
我清理了代码以最小化我的真正目标！ let selectedTiles = Array.from(document.querySelectorAll('app-tile')); selectedTiles.map((tile: **WHAT GOES HERE?**) => { // do something with tile }
好的，既然<app-tile>是一个组件，那么类型就是组件本身的类型，AppTile，你可以在组件类中键入
是的，当前的类型是 T 或我认为的任何类型，但我想将 tile 限制为 app-tile，所以我不会意外传入不同的 dom 元素。
只是一个建议，在 Angular 中使用 document.querySelectorAll 进行选择并不是一个好习惯，有 ViewChildren 装饰器。您可以像@ViewChildren(AppTileComponent) appTiles: QueryList<AppTileComponent>; 一样使用它

【解决方案2】：

在阅读 Angular 文档时偶然发现了答案。不幸的是，自定义类型是不可能的：

当 [Generic DOM APIs，例如 document.createElement() 或 document.querySelector()] 调用未知元素时，例如自定义元素名称（在我们的示例中为 popup-element），这些方法将返回一个泛型类型，例如 HTMLElement，因为 TypeScript 无法推断返回元素的正确类型。

Link here

【讨论】：