こんにちは私は要素に背景色を追加するためにこのディレクティブを持っています:
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]
コメントを追加