web-dev-qa-db-ja.com

ディレクティブを使用してクラスをHost要素に追加する

私は現在Angular 2.を学習しています。Angular Rendererを設定してElementStyleを設定する方法を理解しましたが、 Rendererメソッドを使用したい：

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

私の質問は、CSSクラスを属性ディレクティブにインポートするにはどうすればよいですか？ CSSクラスをJSONに変換する必要がありますか？

angularangular2-directives
24
Daniel Hoppe Alvarez

元のOPは、Rendererの使用方法を尋ねていました。完全を期すために@HostBindingを含めました。

@HostBindingの使用

クラスを要素に追加するには、 @ HostBinding を使用できます

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

複数のクラスで@HostBindingを使用する

複数のクラスを使いやすくするために、ES6ゲッターを使用して、クラスを結合してから返すことができます。

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {
  protected _elementClass: string[] = [];

  @Input('class')
  @HostBinding('class')
  get elementClass(): string {
      return this._elementClass.join(' ');
  }
  set(val: string) {
      this._elementClass = val.split(' ');
  }

  constructor() {
      this._elementClass.Push('custom-theme');
      this._elementClass.Push('another-class');
  }
}

レンダラーを使用する

より低レベルのAPIは Render2 です。 Renderer2は、要素に適用する動的なクラスのセットがある場合に役立ちます。

例：

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  constructor(private renderer: Renderer2, hostElement: ElementRef) {
    renderer.addClass(hostElement.nativeElement, 'custom-theme');
  }
}
58
cgatian

RendererまたはRenderer2クラスを使用する理由は何ですか？ディレクティブでこれを行う好ましい方法は、 @ HostBinding デコレーターを使用することです。

例：

import { HostBinding } from '@angular/core';

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {

    @HostBinding('class')
    className = 'my-directive-css-class';
}
7
csnate

RendererとElementRefを使用してcssクラスを要素に追加する方法の例。

@Directive({
   selector: '[whatever]'
})
class WhateverDirective {
   constructor(renderer: Renderer, el: ElementRef) {
       renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
   }
}

Whatever-css-classは、htmlで参照されるcssファイルで定義されます

5
jaguwalapratik