web-dev-qa-db-ja.com

Angular 2でホストに動的クラスを追加することは可能ですか？

Angular2では、これを行うことでクラスの「赤」をコンポーネントのセレクター要素に追加できることを知っています。

@Component({
    selector: 'selector-el',
    Host: {
        '[class.red]': 'true'
    },
    ...
})

NgClassで行うことと同様に、ホストにdynamicクラスを追加する方法があるかどうか疑問に思っています（NgClassは実際にはサポートされていないことを知っているので、可能な解決策を探しています）：

@Component({
    selector: 'selector-el',
    Host: {
        '[NgClass]': 'colorClass'
    },
    ...
})
...
constructor(){
    this.colorClass = 'red';
}
angularangular2-template
15
Alec Sibilia

次のようなものを使用できます。

@Directive({
  (...)
  Host: {
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
  }
}
export class MyDirective {
  constructor() {
    this.className = true;
    this.classNames = 'class1 class2 class3';
  }
}
14
Thierry Templier

Renderers setElementClassを使用して、任意のクラスを追加または削除できます。例えば ​​md-[color]ここで、colorは入力によって提供されます

<some-cmp [color]="red">

@Component({
// @Directive({
    selector: 'some-cmp',
    template: '...'
})
export class SomeComp {
    _color: string;

    @Input()
    set color(color: string) {
        this._color = color;
        this.renderer.setElementClass(this.elementRef.nativeElement, 'md-' + this._color, true);
    }

    get color(): string {
        return this._color;
    }

    constructor(private elementRef: ElementRef, private renderer: Renderer){}
}

nativeElement.classList.add（）alternative も参照してください

18
Günter Zöchbauer

外部から変更したい場合は、_@HostBinding_と@Input()を組み合わせることができます。

_@Component({
    selector: 'my-component',
    template: ``
})
export class MyComponent {
    @HostBinding('class.your-class') @Input() isSelected: boolean;
}
_
10
crashbus
import {Component, HostBinding} from 'angular2/core';

@Component({
  (...)
}

export class MyComponent {
  @HostBinding('class') colorClass = 'red';
}
7
fransoudelaar

私は最近_<ng-Host>_（ この問題 に触発された）というディレクティブを作成しました。

_@Component({
  template: `
    <ng-Host [ngClass]="{foo: true, bar: false}"></ng-Host>
    <p>Hello World!</p>
  `
})
class AppComponent { }
_

オンラインデモは こちら にあります。

定義済みのサポートされる使用法 ここ 。

サービスとしてのDirective as a Serviceパターン、つまりNgClassを手動で提供し、（ online demo ）

DIメカニズムにより、NgClassは現在のHost要素のElementRefを取得します。Self()修飾子はそれを保証するのに役立ちます。したがって、コンストラクターでインスタンスを作成する必要はありません。したがって、パブリックAPIを使用しています。

クラス継承と組み合わせるとより簡潔になる可能性があります。例は here にあります。

5
Trotyl

次のことができます。

import {Component} from "@angular/core"

@Component({
    selector: "[textbox]",
    Host: {"class": "first-class secondClass ThirdClass AnYClaSs"},
    template: ...                                            
})
export class MyComponent { }

これは、変数を導入するよりも簡単な方法です。
Angular2 rc5、rc6、rc7、finalで動作します。以前のバージョンでも動作する可能性がありますが、試しませんでした。

0
Yaroslav Yakovlev