web-dev-qa-db-ja.com

ディレクティブのAngular2スタイル

指定されたAttributeディレクティブの例（つまり、外観/動作を追加するディレクティブ）では、Host要素のスタイルのかなり単純な設定があります。

import {Directive, ElementRef } from 'angular2/core';
@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(element) {
       element.nativeElement.style.backgroundColor = 'yellow';
    }

static get parameters(){
    return [[ElementRef]];
}

スタイルを設定するのではなく、代わりにスタイルを使用できますか？例えば.

@Directive({
    selector: '[myHighlight]',
    styles: [':Host { background-color: yellow; }']
})

これは私にはうまくいかないようですか？

私は少し複雑なことをしており、かなりの量のモノロシックコード、多くのスタイルの設定、AnimationBuilderの使用などにつながりました。

ViewEncapsulation =それが重要な場合、エミュレート/デフォルト？

angularangular2-directives
36
ct5845

ホストバインディングを使用して、スタイル属性にバインドできます。

@Directive({
    selector: '[myHighlight]',
    Host: {
      '[style.background-color]': '"yellow"',
    }
})

または

@Directive({
    selector: '[myHighlight]',
})
class MyDirective {
  @HostBinding('style.background-color')
  backgroundColor:string = 'yellow';
}
38
Günter Zöchbauer

他の回答はほとんどの状況で役立ちますが、私がユースケースを持っているような、より伝統的なCSSスタイルシートアプローチが必要なようです。

問題は、Host要素内でのみスタイルをスコープするShadow DOMをエミュレートするというAngularのデフォルトです。

2つのオプション：

1）

Angularを使用して、:Host /deep/ .some-style-to-cascade-down-like-normal {}または置換/deep/ with >>>。 Angularのドキュメント を参照してください。

注意すべき3つの重要な点：

  • ViewEncapsulationはデフォルト（エミュレート）状態である必要があります
  • Angular/Chromeはこれらの両方の構文を廃止し、より良いアプローチに取り組んでいます
  • Angular CLIを使用している場合は、/deep/ の代わりに >>>

2）

スコープ付きコンポーネントのカプセル化は失われますが（それが問題になった場合）、以下はディレクティブとして「myHighlight」を使用する例ですが、コンポーネントとしてTypeScriptedスタイルシートをインポートできるように：

使用法：
<p myHighlight>Highlight me!</p>

TS（directiveとして扱われるコンポーネント）：

import {
    Component,
    ViewEncapsulation
} from '@angular/core';

@Component({
    selector: 'p[myHighlight]', // Refer to it like an attribute directive
    templateUrl: './my-highlight.component.html',
    styleUrls: ['./my-highlight.component.scss'],
    encapsulation: ViewEncapsulation.None // Tell Angular to not scope your styles
})

Angular Material 2のボタン は、この同じアプローチを使用してこの問題を解決します。

CSSをAngular 2コンポーネント）に追加するすべての方法 と呼ばれるすばらしい記事があります。この記事は、この認識をもたらし、Angular = 3つのViewEncapsulationプロパティをすべて扱います。

18
bit-less

最初の回答の下にあなたのコメントを読みました。 30のルールをどのように適用できるかわかりません。 しかし、いくつかの方法はここにあります-プランカ 。

selector:"[myHighlight]", 
    Host: {        
    '(mouseenter)':'changeColor()',
    '[style.background]': '"pink"', 
    '(click)':'clickMe()',
    '(mouseout)':'changeColorOnOut()',
  }
4
micronyks

@ m.spyratosと同じですが、Renderer2を使用します。

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

@Directive({
  selector: '[myButton]'
})
export class MyButtonDirective implements OnInit {
  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) { }

  public ngOnInit(): void {
    this.renderer.addClass(
      this.elementRef.nativeElement,
      'my-button'
    );
  }
}
2
Steve Brush

属性セレクターを使用して通常行うように要素をスタイルします。 myHighlight.directive.scss（または何でも）ディレクティブと同じフォルダーにファイルを作成し、そこにスタイルを記述します。

[myhighlight] {
  background-color: yellow;
}

アプリにスタイルファイルが自動的に含まれない場合は、メインのスタイルファイルにインポートするだけです。 Ionic 2の場合、自動的に選択されました。

属性セレクターの代わりに特定のクラスを使用する場合は、レンダラーを使用してクラスを追加します。

import {Directive, ElementRef, Renderer} from 'angular2/core';
@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.renderer.setElementClass(this.el.nativeElement, 'my-highlight', true);
    }
}
0
m.spyratos