web-dev-qa-db-ja.com

Angular 5-特定の要素にスタイルを動的に追加します

私は私のプロジェクトでAngular 5.2を使用していますが、angularフレームワークは初めてです。私のコンポーネントhtmlは次のようになっています。

enter image description here

Style = "top：200px;"を追加したいangular tsコードの上のスクリーンショットでclass = "app-alerts"を使用して強調表示された要素に動的に移動します。クラス「app-alerts」を持つdiv要素がレンダリングのDOMに追加されます。

コードの変更を提案してください。

angularangular5angular-template
9
Karan

私たちのコメントによると、ライフサイクルフックの後にdocument.querySelectorを使用する必要があります

ngAfterViewInit() {
    (document.querySelector('.app-alerts') as HTMLElement).style.top = '150px';
}
12
Aravind

私はこのパーティーにとても遅れていますが、いいえ！ DOCUMENT.QUERYSELECTORを使用しないでください。それはAngular DOM要素をスタイルする方法ではありません！

<div [ngStyle]="{'top.px': divStyle}">

次に、コンポーネントで、あなたが持っています

ngAfterViewInit() {
  this.divStyle = 200; 
}
41
Chris Stanley