web-dev-qa-db-ja.com

Angular 4でレンダラーを使用する

Angular2プロジェクトでDOMを直接操作するのではなく、レンダラーを使用する方が良い理由を理解しています。ただし、アンインストール、キャッシュのクリア、Node、TypeScript、Angular-CLIの再インストールを数回繰り返しましたが、レンダラーを挿入しようとするとエラーが発生します。

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

__zone_symbol__message： "Renderer2のプロバイダーがありません！"

__zone_symbol__stack： "Error↵at Error.ZoneAwareError

誰かが私が間違っていることを知っていますか？

angulartypescriptangular-cli
14
Michael_Cloudbusting

更新：

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

  constructor(rendererFactory: 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-L37

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;
      }

要素インジェクターツリー内でのみチェックします。このトークンを提供できる場所は他にありません

そのため、何らかのサービスメソッドを呼び出すときに、Renderer2をコンポーネントからサービスに渡す必要があります https://github.com/angular/angular/issues/17824#issuecomment-311986129

または、コンポーネント内でサービスを提供できます

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

_Renderer2_を挿入することはできませんが、@Injectable()サービス内で_RendererFactory2_インスタンスを取得するために_Renderer2_を実行できます。たとえば、Webworkerで内部的に使用するAngularの方法があります。

私は以下のコードで問題を解決しました：

_import { Renderer2, RendererFactory2 } from '@angular/core';

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

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

_RendererFactory2.createRenderer_メソッドのパラメーターは次のとおりです。

  • hostElementタイプany
  • typeタイプ_RendererType2|null_

_(null, null)_パラメータがここにあることがわかります： https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/core/src/render/api.ts# L129

13
Eugene Gavrilov