在 Angular 4 中使用渲染器 [英] Using Renderer in Angular 4

问题描述

我明白为什么在 Angular2 项目中最好使用渲染器而不是直接操作 DOM.但是，我已经多次卸载、清除缓存、重新安装 Node、Typescript 和 Angular-CLI，但在尝试注入渲染器时仍然出现错误.

import { Injectable, Renderer2 } from '@angular/core';构造函数(私有渲染器:Renderer2){}

<块引用>

__zone_symbol__message:Renderer2 没有提供程序！"

__zone_symbol__stack:"Error↵ at Error.ZoneAwareError

有人知道我做错了什么吗?

解决方案

更新:

@Injectable()类我的服务{私有渲染器:Renderer2；构造函数(渲染工厂:RendererFactory2){this.renderer = rendererFactory.createRenderer(null, null);}}

在此处查看更多信息:https://github.com/angular/angular/issues/17824#issuecomment-351961146

以前的版本:

根据你的进口

import { Injectable, Renderer2 } from '@angular/core'

我怀疑您正试图在您的服务类中注入 Renderer2.它不会工作.您不能在服务中注入 Renderer2.它应该适用于组件内提供的组件和服务.

我们可以看一下源码https://github.com/angular/angular/blob/4.0.1/packages/core/src/view/provider.ts#L363-L373

while (view) {如果(elDef){开关(令牌键){案例RendererV1TokenKey:{const compView = findCompView(view, elDef, allowPrivateServices);返回 createRendererV1(compView);}案例Renderer2TokenKey:{const compView = findCompView(view, elDef, allowPrivateServices);返回 compView.renderer;}

它只在元素注入树中检查.并且没有其他地方可以提供这个令牌

因此，当您调用某个服务方法时，您必须将 Renderer2 从组件传递到服务 https://github.com/angular/angular/issues/17824#issuecomment-311986129

或者你可以在组件内提供服务

@Injectable()出口类服务{构造函数(私有 r:Renderer2){}}@成分({选择器:'我的应用'，模板网址:`./app.component.html`，提供者:[服务]})导出类 AppComponent {构造函数(私有服务:服务){}}

I understand why it's better to use renderer instead of directly manipulating the DOM in Angular2 projects. However, I have uninstalled, clear cache, reinstalled Node, Typescript and the Angular-CLI several times and I still get an error when trying to inject the Renderer.

import { Injectable, Renderer2 } from '@angular/core';
constructor(private renderer: Renderer2) {}

__zone_symbol__message: "No provider for Renderer2!"

__zone_symbol__stack:"Error↵ at Error.ZoneAwareError

Does anyone have any ideas what I am doing wrong?

解决方案

Update:

@Injectable()
class MyService {
  private renderer: Renderer2;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }
}

See more on this here: https://github.com/angular/angular/issues/17824#issuecomment-351961146

Previous version:

According to your imports

import { Injectable, Renderer2 } from '@angular/core'

i suspect that you're trying to inject Renderer2 in your service class. It won't work. You can't inject Renderer2 in service. It should work for components and services that are provided within component.

We can take a look at source code https://github.com/angular/angular/blob/4.0.1/packages/core/src/view/provider.ts#L363-L373

while (view) {
  if (elDef) {
    switch (tokenKey) {
      case RendererV1TokenKey: {
        const compView = findCompView(view, elDef, allowPrivateServices);
        return createRendererV1(compView);
      }
      case Renderer2TokenKey: {
        const compView = findCompView(view, elDef, allowPrivateServices);
        return compView.renderer;
      }

it checks only within element injector tree. And there are no other places when this token can be provided

So you have to pass Renderer2 from component to service when you're calling some service method https://github.com/angular/angular/issues/17824#issuecomment-311986129

or you can provide service within component

@Injectable()
export class Service {
  constructor(private r: Renderer2) {}
}
@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`,
  providers: [Service]
})
export class AppComponent { 
  constructor(private service: Service) {}
}

这篇关于在 Angular 4 中使用渲染器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！