在Angular 4中使用Renderer

发布时间：2020-12-17 08:00:04 所属栏目：安全来源：网络整理

导读：我理解为什么最好使用渲染器而不是直接操纵Angular2项目中的DOM.但是,我已经多次卸载,清除缓存,重新安装Node,Typescript和Angular-CLI,并且在尝试注入渲染器时仍然会出错. import { Injectable,Renderer2 } from '@angular/core';constructor(private render

我理解为什么最好使用渲染器而不是直接操纵Angular2项目中的DOM.但是,我已经多次卸载,清除缓存,重新安装Node,Typescript和Angular-CLI,并且在尝试注入渲染器时仍然会出错.

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

__zone_symbol__message: “No provider for Renderer2!”

__zone_symbol__stack:”Error? at Error.ZoneAwareError

有没有人有任何想法我做错了什么？

根据你的进口

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) {
  if (elDef) {
    switch (tokenKey) {
      case RendererV1TokenKey: {
        const compView = findCompView(view,elDef,allowPrivateServices);
        return createRendererV1(compView);
      }
      case Renderer2TokenKey: {
        const compView = findCompView(view,allowPrivateServices);
        return compView.renderer;
      }

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

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

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

@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) {}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!