Bagaimana saya dapat menambahkan kelas ke body tag tanpa membuat body sebagai aplikasi pemilih dan menggunakan host mengikat?
Saya mencoba menggunakan Renderer tapi ia mengubah seluruh tubuh
https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag
I'm bekerja pada besar angular2 aplikasi dan mengubah akar pemilih akan berdampak banyak kode, saya harus mengubah banyak kode
Saya menggunakan hal ini adalah:
Ketika saya membuka sebuah komponen modal (dibuat secara dinamis) aku ingin dokumen untuk menyembunyikan scrollbar
Aku akan senang untuk memberikan komentar. Tapi karena hilang reputasi saya menulis jawaban. Yah aku tahu dua kemungkinan untuk memecahkan masalah ini.
konstruktor(@Inject(DOKUMEN) dokumen pribadi: Dokumen) {}ngOnInit(){ ini.dokumen.tubuh.classList.tambahkan('test'); }
Baik dan bahkan mungkin lebih baik. Anda bisa menyuntikkan penyaji atau penyaji 2 (pada NG4) dan tambahkan class dengan penyaji.
ekspor kelas myModalComponent mengimplementasikan OnDestroy {konstruktor(pribadi penyaji: Penyaji) { ini.penyaji.setElementClass(dokumen.tubuh, 'modal-buka', true); }
ngOnDestroy() { ini.penyaji.setElementClass(dokumen.tubuh, 'modal-buka', false); }
UNTUK MENGEDIT ANGULAR4:
impor { Komponen, OnDestroy, Renderer2 } dari '@sudut/inti';ekspor kelas myModalComponent mengimplementasikan OnDestroy {
konstruktor(pribadi penyaji: Renderer2) { ini.penyaji.addClass(dokumen.tubuh, 'modal-buka'); }
ngOnDestroy() { ini.penyaji.removeClass(dokumen.tubuh, 'modal-buka'); }
Saya pikir cara terbaik untuk melakukan ini adalah kombinasi dari kedua pendekatan oleh DaniS di atas: Menggunakan renderer untuk benar-benar mengatur / menghapus kelas, tetapi juga menggunakan dokumen injector, jadi itu tidak sangat tergantung pada jendela.dokumen
tapi itu bisa diganti secara dinamis (misalnya ketika render server-side). Sehingga kode keseluruhan akan terlihat seperti ini:
import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
@Component({ /* ... */ })
export class MyModalComponent implements OnInit, OnDestroy {
constructor (
@Inject(DOCUMENT) private document: Document,
private renderer: Renderer2,
) { }
ngOnInit(): void {
this.renderer.addClass(this.document.body, 'embedded-body');
}
ngOnDestroy(): void {
this.renderer.removeClass(this.document.body, 'embedded-body');
}
}