Angularディレクティブは要素スタイルの変更をリッスンします

effirvida

こんにちは私は要素に背景色を追加するためにこのディレクティブを持っています:

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

@Directive({
  selector: '[bg-color]'
})
export class BgColorDirective implements AfterViewInit {
  private el: HTMLElement;
  @Input('bg-color') backgroundColor: string;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

    ngAfterViewInit() {
      this.el.style.backgroundColor = this.backgroundColor;
    }

}

しかし、私の場合、別のコンポーネント内で使用しngx-slick、このコンポーネントは常にスタイルを変更してから、ディレクティブの結果を上書きします。オーバーライド後にディレクティブを適用する方法はありますか?

ビートルジュース

データバインディングを使用して、Angularが適切な色を維持できるようにします。ディレクティブを次のように変更します。

@Directive({
  selector: '[bg-color]'
})
export class BgColorDirective {
  // update color at each input change
  @Input('bg-color') set inputColor(value){this.color = value};

  //data-bind to the host element's style property
  @HostBinding('style.backgroundColor') color = 'white';//default color
}

以前と同じように背景色を設定できます。

<ngx-slick bg-color="blue"></ngx-slick>
<ngx-slick [bg-color]="someProperty"></ngx-slick>

現在の違いは、@ HostBindingが各変更検出サイクルでバインディングをチェックおよび更新することです。これは@angular / coreからインポートされ、単一のプロパティまたはオブジェクトにバインドする場合は文字列を取ります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular2 ディレクティブは、親コンポーネントのコールバックまたは変更をリッスンします

分類Dev

Angularjs:ディレクティブでモデルの変更をリッスンします

分類Dev

anglejsディレクティブリンク関数の要素クラスを変更します

分類Dev

Angular jsディレクティブは、すべてのインスタンスに変更を適用します

分類Dev

Angular2:自動スクロールディレクティブの検出タイミングを変更します

分類Dev

Angularディレクティブで要素の属性の変更をリッスンするにはどうすればよいですか?

分類Dev

Angularのディレクティブ属性要素の外側をクリックしたときに要素にスタイルを適用する

分類Dev

AngularJs-このインスタンスでスライダーディレクティブのデフォルト状態を変更しますか?

分類Dev

Angular2-ディレクティブの子HTML要素に条件付きスタイルを適用します

分類Dev

Angular2-ディレクティブの子HTML要素に条件付きスタイルを適用します

分類Dev

Angular JSディレクティブ、リンク関数の双方向データバインディングを変更します

分類Dev

入力の変更をリッスンするカスタム ディレクティブを作成する方法

分類Dev

すべての親ディレクトリのプレフィックスを追加してファイル名を変更し、サブディレクトリとサブサブディレクトリからメインディレクトリにすべてのファイルをコピーします

分類Dev

Angular:イベントリスナーはディレクティブの変更間で段階的に増加します

分類Dev

Angular:別のディレクティブからホスト上の1つのディレクティブインスタンスの参照を取得します

分類Dev

Angularのカスタムディレクティブでマウスイベントをリッスンします

分類Dev

QTreeView / QHeaderViewは、最初の列のみのサイズを変更して、ストレッチとインタラクティブの両方を実現します

分類Dev

OnPressはコンポーネントのスタイルをループから変更します-フックでネイティブに反応します

分類Dev

ボタンをクリックしてテーブルのバインディングを変更する

分類Dev

特定のインデックスによるリアクティブ状態の更新は、配列をオブジェクトに変更します

分類Dev

Windows10はOffice2016のインストールディレクトリを変更します

分類Dev

タイムスタンプが変更されたすべてのファイルとサブディレクトリを再帰的に一覧表示します

分類Dev

Angular2のfor ... ofディレクティブでインデックスを取得します

分類Dev

アクティブリンクのスタイルを変更する方法

分類Dev

vue3ディレクティブはvueemitをリッスンします

分類Dev

Angularディレクティブ:既存のテンプレート要素にコンパイル時にng-classディレクティブを追加します

分類Dev

Angular BootstrapPopover-カスタムディレクティブのタイトルを削除します

分類Dev

ボタンがクリックされるたびに角度ディレクティブを変更します

分類Dev

postgresqlで単一のテーブルまたはデータベースのデータディレクトリを変更できますか?

Related 関連記事

  1. 1

    Angular2 ディレクティブは、親コンポーネントのコールバックまたは変更をリッスンします

  2. 2

    Angularjs:ディレクティブでモデルの変更をリッスンします

  3. 3

    anglejsディレクティブリンク関数の要素クラスを変更します

  4. 4

    Angular jsディレクティブは、すべてのインスタンスに変更を適用します

  5. 5

    Angular2:自動スクロールディレクティブの検出タイミングを変更します

  6. 6

    Angularディレクティブで要素の属性の変更をリッスンするにはどうすればよいですか?

  7. 7

    Angularのディレクティブ属性要素の外側をクリックしたときに要素にスタイルを適用する

  8. 8

    AngularJs-このインスタンスでスライダーディレクティブのデフォルト状態を変更しますか?

  9. 9

    Angular2-ディレクティブの子HTML要素に条件付きスタイルを適用します

  10. 10

    Angular2-ディレクティブの子HTML要素に条件付きスタイルを適用します

  11. 11

    Angular JSディレクティブ、リンク関数の双方向データバインディングを変更します

  12. 12

    入力の変更をリッスンするカスタム ディレクティブを作成する方法

  13. 13

    すべての親ディレクトリのプレフィックスを追加してファイル名を変更し、サブディレクトリとサブサブディレクトリからメインディレクトリにすべてのファイルをコピーします

  14. 14

    Angular:イベントリスナーはディレクティブの変更間で段階的に増加します

  15. 15

    Angular:別のディレクティブからホスト上の1つのディレクティブインスタンスの参照を取得します

  16. 16

    Angularのカスタムディレクティブでマウスイベントをリッスンします

  17. 17

    QTreeView / QHeaderViewは、最初の列のみのサイズを変更して、ストレッチとインタラクティブの両方を実現します

  18. 18

    OnPressはコンポーネントのスタイルをループから変更します-フックでネイティブに反応します

  19. 19

    ボタンをクリックしてテーブルのバインディングを変更する

  20. 20

    特定のインデックスによるリアクティブ状態の更新は、配列をオブジェクトに変更します

  21. 21

    Windows10はOffice2016のインストールディレクトリを変更します

  22. 22

    タイムスタンプが変更されたすべてのファイルとサブディレクトリを再帰的に一覧表示します

  23. 23

    Angular2のfor ... ofディレクティブでインデックスを取得します

  24. 24

    アクティブリンクのスタイルを変更する方法

  25. 25

    vue3ディレクティブはvueemitをリッスンします

  26. 26

    Angularディレクティブ:既存のテンプレート要素にコンパイル時にng-classディレクティブを追加します

  27. 27

    Angular BootstrapPopover-カスタムディレクティブのタイトルを削除します

  28. 28

    ボタンがクリックされるたびに角度ディレクティブを変更します

  29. 29

    postgresqlで単一のテーブルまたはデータベースのデータディレクトリを変更できますか?

ホットタグ

アーカイブ