Angular2 बॉडी टैग में क्लास जोड़ते हैं

Question

कैसे मैं एक जोड़ सकते हैं वर्ग के शरीर बनाने के बिना टैग शरीर एप्लिकेशन चयनकर्ता के रूप में और मेजबान बंधन का उपयोग कर?

मैंने रेंडरर का उपयोग करने की कोशिश की लेकिन यह पूरे शरीर को बदल देता है

शरीर के टैग पर कोणीय 2.x बाँध वर्ग

मैं एक बड़े कोणीय 2 ऐप पर काम कर रहा हूं और रूट चयनकर्ता को बदलने से बहुत सारे कोड प्रभावित होंगे, मुझे बहुत सारे कोड बदलने होंगे

मेरा उपयोग मामला यह है:

जब मैं एक मोडल घटक खोलता हूं (गतिशील रूप से बनाया जाता है) मैं चाहता हूं कि दस्तावेज़ स्क्रॉलबार छिप जाए

Comments

वास्तव में यदि आप html पेज के भीतर js के साथ काम करते हैं तो उपयोग करने में क्या समस्या है document.body.className|classList?

— युरज़ुई

हाहा अगर यह केवल इतना आसान था :), लेकिन सीधे डोम तक पहुंचने के लिए यह एक बुरा अभ्यास है

— राचिड ओ

आप एक बड़ा आवरण लिख सकते हैं जिसे कई सेकंड और अंत में जोड़ा classजाएगा body। यदि आप सर्वर रेंडरिंग या वेब वर्कर का उपयोग नहीं करने जा रहे हैं तो आप किससे डरते हैं?

— युरज़ुई

तो इससे बेहतर कोई उपाय नहीं है?

— राचिड ओ

मैं इन अपमानजनक लोगों को समझ नहीं पा रहा हूं जो बिना किसी वैध कारण के सवालों को दरकिनार करते हैं और बंद करते हैं

— Rachid O

Answer 1

मुझे टिप्पणी करना अच्छा लगेगा। लेकिन लापता प्रतिष्ठा के कारण मैं एक उत्तर लिखता हूं। वैसे मैं इस मुद्दे को हल करने के लिए दो संभावनाएं जानता हूं।

1. वैश्विक दस्तावेज़ को इंजेक्ट करें। वैसे यह सबसे अच्छा अभ्यास नहीं हो सकता है क्योंकि मुझे नहीं पता कि मूल निवासी आदि का समर्थन करता है। लेकिन यह शुद्ध जेएस के उपयोग से कम से कम बेहतर है।

कंस्ट्रक्टर (@ इंजेक्ट (दस्तावेज़) निजी दस्तावेज़: दस्तावेज़) {}

ngOnInit () {
   this.document.body.classList.add ( 'परीक्षण');
}

अच्छा और शायद बेहतर भी। आप रेंडरर या रेंडरर 2 (NG4 पर) इंजेक्ट कर सकते हैं और रेंडरर के साथ वर्ग जोड़ सकते हैं।

निर्यात वर्ग myModalComponent लागू करता है OnDestroy {

  कंस्ट्रक्टर (निजी रेंडरर: रेंडरर) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

ANGULAR4 के लिए संपादित करें:

आयात {Component, OnDestroy, Renderer2} '@ कोणीय / कोर' से;

निर्यात वर्ग myModalComponent लागू करता है OnDestroy {

  कंस्ट्रक्टर (निजी रेंडरर: रेंडरर 2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

Comments

उत्तर के लिए धन्यवाद, मुझे लगता है कि रेंडरर का उपयोग करना सबसे अच्छा समाधान है

— राचिड ओ

अगर कोई सोचता है कि कहां से import { DOCUMENT } from '@angular/platform-browser'

— डॉक्युमेंट

रेंडरर समाधान ज्यादा बेहतर है। कोणीय 4 में, रेंडरर को हटा दिया गया है और उसे रेंडरर 2 से बदल दिया गया है। कोड को बदलना होगा: this.renderer.addClass(document.body, 'modal-open'); औरthis.renderer.removeClass(document.body, 'modal-open');

— GreyBeardedGeek

इसके अलावा, @Inject(DOCUMENT)अब निर्माता में जरूरत नहीं है

— ग्रेबियरगेड गीक जूल

@Neph के अपडेट के रूप में: प्लेटफ़ॉर्म-ब्राउज़र से DOCUMENT आयात करना पदावनत है। इसके बजाय @ कोणीय / आम का उपयोग करें।

— पीटर डी ब्यू

Answer 2

मुझे लगता है कि यह करने का सबसे अच्छा तरीका है कि ऊपर DaniS द्वारा दोनों दृष्टिकोणों का एक संयोजन है: रेंडरर का उपयोग वास्तव में कक्षा को सेट / निकालने के लिए, लेकिन दस्तावेज़ इंजेक्टर का उपयोग करके भी, इसलिए यह दृढ़ता से निर्भर नहीं है, window.documentलेकिन इसे गतिशील रूप से प्रतिस्थापित किया जा सकता है (जैसे जब सर्वर-साइड रेंडरिंग)। तो पूरा कोड इस तरह दिखेगा:

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

Comments

थैंक यू, थैंक यू, थैंक यू, थैंक यू, थैंक यू, थैंक यू, थैंक यू :)

— कमलेश