代码之家 › 专栏 › 技术社区 › Alexander Abakumov

从服务附加DOM事件处理程序

angular-services dependency-injection dom typescript angular

1

Alexander Abakumov · 技术社区 · 8 年前

Renderer2.listen() 以防您需要这样做,而不是从一个模板。这种方法非常适用于 Directive Component s。

如果你需要在一个 Service ,一个问题是 Renderer2 实例到服务构造函数中:

export class SomeService {
    public constructor(private readonly renderer: Renderer2) {
    }
}

将导致缺少DI提供程序异常:

为了缓解这种情况,我们可以使用 RendererFactory2 课程目标:

创建并初始化实现 Renderer2基类。

但我不确定 Render2 对于在服务中使用它的情况,是一种很好的\推荐方法。

1 回复 | 直到 8 年前

1

2

joh04667 6 年前

其他人评论说,这种行为可能更适合于 Component 或者 Directive ,但在较低的层次上看到Angular中发生的事情是很有趣的。这是一个非常模块化的框架,这是一个很好的机会来学习更多关于DI的知识。

这个 Renderer2 模板通过内部 Renderer2Interceptor . 它也有不同的范围而不是在根级别注入的提供者或其他全局角度提供者:因为它用于呈现组件和指令的模板,所以它的范围仅限于那些类型的声明。它是一个非常低级的提供者,Angular使用它来创建带有视图的声明,因此它可以被注入到视图中——因为服务也是一个 @Injectable ,角度DI层次结构分别处理它们,因此 渲染器2 在其层次结构中不可用。

渲染器2 declarations 在模块中。但不是 providers . 声明 是否附加了实例和需要的模板,但是

使用 RendererFactory 只有这样 直接地 注入 渲染器2 变成一种服务。

而我认为你不想再制造一个 渲染器2 是有效的,请在上查看此评论 the Angular repo:

rendererFactory.createRenderer(null, null) 如果没有,会有帮助的 (具体)参数传递时,它将只返回默认的渲染器不创建新的(碳化硅)

所以,使用 RendererFactory2.createRenderer(null, null) DomRenderer . 这个工厂的存在是为了创造一个值得庆幸的是,Angular得到了很好的维护,不会产生重复如果工厂被叫来。

所以,只要注射 RendererFactory2 并获取默认值从它那里。

因为我知道 Renderer 是重要的角度和工作,所以努力使用它。有太多的人直接去DOM操作。