Angular Query黑魔法

本文介绍如何在Angular中使用Query获取Directive的hostElement,并通过ViewInjector获取所需服务。通过定义抽象类来解耦Component类与query使用者,使query操作更加灵活。

Query一个Directive,拿到这个Directive的host Element:


更进一步地,通过Query,可以从指定的Element的Injector(View Injector)中获取你想要的服务:

在这个例子中,我们想要query的服务就是Component实例。

定义一个抽象类(而不是interface,因为运行时没有interface,不能作为DI token)。这个抽象类将Component类与query使用者解耦,使用query的时候不需要知道Component的类型,而是通过这个抽象类的API与Component进行交互。

让我们想要query的component实现这个抽象类。当然,我们还要在相应的View Injector中Provide这个服务:

解决Typescript报错:

https://youtu.be/EoSn8qASqQA?...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值