Angular2 gövde etiketine sınıf ekle

101

Nasıl ekleyebilir sınıf için vücut yapmadan etiketi vücudu uygulaması seçicisi olarak ve bağlayıcı ev sahibi kullanarak?

Renderer'ı kullanmayı denedim ama tüm vücudu değiştirdi

Gövde etiketinde açısal 2.x bağlama sınıfı

Büyük bir angular2 uygulaması üzerinde çalışıyorum ve kök seçiciyi değiştirmek çok fazla kodu etkileyecek, çok fazla kod değiştirmem gerekecek

Benim kullanım durumum şu:

Bir mod bileşenini (dinamik olarak oluşturulmuş) açtığımda belge kaydırma çubuğunun gizlenmesini istiyorum

angular

— Rachid O
kaynak

Aslında html sayfasında js ile çalışıyorsanız, kullanmanın problemi document.body.className|classListnedir?

— yurzui

haha keşke bu kadar basit olsaydı :) ama dom'a doğrudan erişmek kötü bir uygulama

— Rachid O

Birkaç saniye idam ve katma sonunda teslim edecek büyük bir sarmalayıcı yazabilirsiniz classiçin body. Sunucu oluşturma veya web çalışanı kullanmayacaksanız, neden korkuyorsunuz?

— yurzui

yani bundan daha iyi bir çözüm yok mu?

— Rachid O

Geçerli bir sebep olmaksızın olumsuz oy kullanan ve soruları kapatan bu istismarcı insanları anlayamıyorum

— Rachid O

Yanıtlar:

218

Yorum yapmayı çok isterim. Ama itibar eksikliğinden dolayı bir cevap yazıyorum. Bu sorunu çözmek için iki olasılık biliyorum.

Global Belgeyi enjekte edin. Nativescript vb. Bunu destekleyip desteklemediğini bilmediğim için en iyi uygulama olmayabilir. Ama en azından saf JS kullanmaktan daha iyidir.

yapıcı (@ Enjekte (DOCUMENT) özel belge: Belge) {}

ngOnInit () {
   this.document.body.classList.add ('test');
}

Eh ve belki daha da iyi. Oluşturucuyu veya oluşturucuyu 2 (NG4 üzerinde) enjekte edebilir ve oluşturucu ile sınıfı ekleyebilirsiniz.

ihracat sınıfı myModalComponent, OnDestroy {

  yapıcı (özel oluşturucu: Oluşturucu) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

  ngOnDestroy () {
    this.renderer.setElementClass (document.body, 'modal-open', false);
  }

ANGULAR4 İÇİN DÜZENLE:

{Component, OnDestroy, Renderer2} dosyasını '@ angular / core'dan içe aktarın;

ihracat sınıfı myModalComponent, OnDestroy {

  yapıcı (özel oluşturucu: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

  ngOnDestroy () {
    this.renderer.removeClass (document.body, 'modal-open');
  }

— DaniS
kaynak

cevabınız için teşekkürler, bence en iyi çözüm yorumlayıcıyı kullanmak

— Rachid O

BELGEYİ nereden alacağını merak eden biri varsa, bu:import { DOCUMENT } from '@angular/platform-browser'

— Neph

Renderer çözümü çok daha iyi. Angular 4'te, Renderer kullanımdan kaldırıldı ve Renderer2 ile değiştirildi. Kod şu şekilde değiştirilmelidir: this.renderer.addClass(document.body, 'modal-open'); vethis.renderer.removeClass(document.body, 'modal-open');

— GreyBeardedGeek

Ayrıca, @Inject(DOCUMENT)

— yapıcıda

@Neph için bir güncelleme olarak: DOCUMENT'i platform tarayıcısından içe aktarmak artık kullanılmıyor. Bunun yerine @ angular / common kullanın.

— Pieter De Bie

Sanırım bunu yapmanın en iyi yolu, yukarıda DaniS'nin her iki yaklaşımının bir kombinasyonudur: Sınıfı fiilen ayarlamak / kaldırmak için oluşturucuyu kullanmak, aynı zamanda belge enjektörünü kullanmak, bu nedenle büyük ölçüde bağımlı değildir, window.documentancak dinamik olarak değiştirilebilir (örneğin, sunucu tarafında işlerken). Yani kodun tamamı şöyle görünecektir:

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');
    }
}

— DHainzl
kaynak

Teşekkür Ederiz, Teşekkür Ederiz, Teşekkür Ederiz, Teşekkür Ederiz, Teşekkür Ederiz, Teşekkür Ederiz, Teşekkür Ederiz :)

— Kamlesh