如何通过注入令牌访问角度材料CDKDRAGPREVIEW实例

发布于 2025-01-20 16:00:00 字数 828 浏览 0 评论 0原文

在Angular Material的拖放中,可以选择访问CDKDRAGPREVIEW的实例这是在拖放操作过程中遵循鼠标的元素,并且用户本质上是“拖动”的。

材料中的逻辑是创建dragPreview触发阻力的元素的克隆版本。然后,在拖放操作过程中,该克隆将附加到文档主体的末端。然后,一旦下降完成后,克隆的元件再次删除。

我想参考该拖动元素,但我不明白如何。材料文档指出可以通过注射令牌访问。

// Injection token that can be used to reference instances of CdkDragPreview. 
// It serves as alternative token to the actual CdkDragPreview class which 
// could cause unnecessary retention of the class and its directive metadata.

const CDK_DRAG_PREVIEW: InjectionToken<CdkDragPreview<any>>;

我不明白注射令牌是如何工作的,而我何时甚至可以使用该令牌,因为当调用组件构造函数时,甚至还没有创建该元素。

我如何使用注入令牌(如上图所示)访问拖动预览实例?

In Angular Material's Drag and Drop there is an option to access the instances of the CdkDragPreview This is the element that follows the mouse during a drag and drop operation and is essentially "dragged" by the user.

The logic in Material is to create the DragPreview a cloned version of the element that the drag is triggered on. This clone is then appended to the very end of the document body during a drag and drop operation. The cloned element is then removed again once the drop has been completed.

I would like to get a reference to that dragged element but I can't understand how. The Material docs state that it can be accessed via an injection token.

// Injection token that can be used to reference instances of CdkDragPreview. 
// It serves as alternative token to the actual CdkDragPreview class which 
// could cause unnecessary retention of the class and its directive metadata.

const CDK_DRAG_PREVIEW: InjectionToken<CdkDragPreview<any>>;

I don't understand how injection tokens work and I'm confuses as to when this token would even become available since, when the component constructor is called, the element is not even going to have been created yet.

How can I use the injection token (as shown above) to access the drag preview instance?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

若能看破又如何 2025-01-27 16:00:01

首先,我认为您提供的文档应该是内部的,从某种意义上说,CDK_DRAG_PREVIEW 仅应在基于 CDK 的拖放功能进行开发时使用。

我的假设基于源代码 itslef :如 这个页面,注入token只是作为Directive装饰器中的提供者使用,不幸的是,同一个装饰器似乎没有exportAs 属性,这意味着您无法直接访问它。

但根据您的需求,您可以轻松访问的是您自己的模板。 这是一个示例(打开控制台即可看到)。

这仅允许您访问 ElementRef(用作预览的 HTML 元素),而不是实际的拖动预览指令。

First, I think that the documentation you gave is supposed to be internal, in the sense that CDK_DRAG_PREVIEW should only be used when developing on the CDK's drag-n-drop feature.

I base my assumption on the source code itslef : as shown on this page, the injection token is only used as a provider in the Directive decorator, and unfortunately, the same decorator does not seem to have a exportAs property, which means you can't directly access it.

But depending on your needs, what you CAN access rather easily is your own template. Here is an example (open the console to see it).

This only gives you access to the ElementRef (the HTML element that is used as the preview), not the actual drag preview directive though.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文