কৌণিক 2 বডি ট্যাগে ক্লাস যুক্ত করে

Question

আমি কিভাবে যোগ করতে পারেন বর্গ থেকে শরীর না করে ট্যাগ শরীর অ্যাপ্লিকেশন নির্বাচকের এবং হোস্ট বাঁধাই ব্যবহার করছেন?

আমি রেন্ডারারটি ব্যবহার করে চেষ্টা করেছি তবে এটি পুরো শরীরকে পরিবর্তন করে

বডি ট্যাগে কৌণিক 2.x বাইন্ড শ্রেণি

আমি একটি বড় কৌণিক 2 অ্যাপে কাজ করছি এবং রুট সিলেক্টর পরিবর্তন করা অনেক কোডকে প্রভাবিত করবে, আমাকে প্রচুর কোড পরিবর্তন করতে হবে

আমার ব্যবহারের কেসটি হ'ল:

আমি যখন কোনও মডেল উপাদান খুলি (গতিশীলভাবে তৈরি করা) তখন আমি নথির স্ক্রোলবারটি আড়াল করতে চাই

Comments

আসলে আপনি যদি এইচটিএমএল পৃষ্ঠায় জেএস নিয়ে কাজ করেন তবে ব্যবহার করতে সমস্যা কি document.body.className|classList?

— yurzui

হাহা যদি কেবল এটিই সহজ ছিল :) তবে সরাসরি ডম অ্যাক্সেস করা খারাপ অভ্যাস

— রচিদ ও

আপনি একটি বড় মোড়ক লিখতে পারেন যা বেশ কয়েক সেকেন্ডে চালিত হবে এবং শেষে যুক্ত classহবে body। আপনি যদি সার্ভার রেন্ডারিং বা ওয়েব কর্মী ব্যবহার করতে যাচ্ছেন না তবে আপনি যা ভীত?

— yurzui

তাহলে এর চেয়ে ভাল আর কোন সমাধান নেই?

— রাছিদ ও

আমি এই গালিগালাজকারীদের বুঝতে পারি না যারা কোনও বৈধ কারণ ছাড়াই প্রশ্নকে নষ্ট করে এবং বন্ধ করে দেয়

— Rachid O

Answer 1

আমি মন্তব্য করতে চাই। তবে খ্যাতি হারিয়ে যাওয়ার কারণে আমি একটি উত্তর লিখি। ভাল আমি এই সমস্যাটি সমাধান করার দুটি সম্ভাবনা জানি।

1. গ্লোবাল ডকুমেন্ট ইনজেক্ট করুন। ভাল এটি অনুশীলন নাও হতে পারে কারণ আমি জানি না যে নেটিসস্ক্রিপ্ট ইত্যাদি সমর্থন করে কিনা। এটি খাঁটি জেএস ব্যবহার করার চেয়ে কমপক্ষে ভাল।

কনস্ট্রাক্টর (@ ইনজেক্ট (ডকুমেন্ট) প্রাইভেট ডকুমেন্ট: ডকুমেন্ট)}

ngOnInit () {
   this.docament.body.classList.add ('পরীক্ষা');
}

ভাল এবং সম্ভবত আরও ভাল। আপনি উপস্থাপক বা উপস্থাপক 2 ইনজেকশন করতে পারেন (এনজি 4 এ) এবং উপস্থাপকের সাথে ক্লাস যুক্ত করতে পারেন।

এক্সপোর্ট ক্লাস মাইমোডাল কম্পোনেন্টটি অনডেস্ট্রয় প্রয়োগ করে {

  কনস্ট্রাক্টর (প্রাইভেট রেন্ডারার: ​​রেন্ডারার) {
    this.renderer.setElementClass (ডকুমেন্ট.বডি, 'মডেল-ওপেন', সত্য);
   }

  ngOnDestroy () {
    this.renderer.setElementClass (ডকুমেন্ট.বডি, 'মডেল-ওপেন', মিথ্যা);
  }

অ্যাঙ্গুলার 4 এর জন্য সম্পাদনা করুন:

'@ কৌণিক / কোর' থেকে import উপাদান, অনডেস্ট্রয়, রেন্ডারার 2 import আমদানি করুন;

এক্সপোর্ট ক্লাস মাইমোডাল কম্পোনেন্টটি অনডেস্ট্রয় প্রয়োগ করে {

  কনস্ট্রাক্টর (প্রাইভেট রেন্ডারার: ​​রেন্ডারার 2) {
    this.renderer.addClass (ডকুমেন্ট.বডি, 'মডেল-ওপেন');
   }

  ngOnDestroy () {
    this.renderer.removeClass (ডকুমেন্ট.বডি, 'মডেল-ওপেন');
  }

Comments

উত্তরের জন্য ধন্যবাদ, আমি মনে করি রেন্ডারটি ব্যবহার করা সবচেয়ে ভাল সমাধান

— ও

যদি কেউ import { DOCUMENT } from '@angular/platform-browser'

— ডকুমেন্টটি

রেন্ডারারের সমাধানটি আরও ভাল। কৌণিক 4 এ, রেন্ডারারকে অবহেলা করা হয়েছে এবং রেন্ডারার 2 এর সাথে প্রতিস্থাপন করা হয়েছে। this.renderer.addClass(document.body, 'modal-open');this.renderer.removeClass(document.body, 'modal-open');

— কোডটিতে

এছাড়াও, @Inject(DOCUMENT)কনস্ট্রাক্টরের আর দরকার নেই

— গ্রেইবার্ডজিক

@ নেফ-এর আপডেট হিসাবে: প্ল্যাটফর্ম-ব্রাউজার থেকে ডকুমেন্ট আমদানি হ্রাস করা হয়েছে। পরিবর্তে @ কৌনিক / সাধারণ ব্যবহার করুন।

— পিটার ডি বাই

Answer 2

আমি মনে করি এটি করার সর্বোত্তম উপায়টি উপরের ড্যানিসের উভয় পদ্ধতির সংমিশ্রণ: রেন্ডারারটি ব্যবহার করে ক্লাসটি প্রকৃতপক্ষে নির্ধারণ / অপসারণ করতে, তবে নথির ইনজেক্টর ব্যবহার করে, সুতরাং এটি দৃ strongly়ভাবে নির্ভর করে না 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

আপনাকে ধন্যবাদ, ধন্যবাদ, ধন্যবাদ, আপনাকে ধন্যবাদ, আপনাকে ধন্যবাদ, ধন্যবাদ, ধন্যবাদ আপনাকে :)

— কমলেশ