Angular2 เพิ่มคลาสให้กับแท็กเนื้อหา

ฉันจะเพิ่มคลาสลงในแท็กเนื้อหาได้อย่างไรโดยไม่ต้องทำให้เนื้อหาเป็นตัวเลือกแอปและใช้การเชื่อมโยงโฮสต์

ฉันลองใช้ Renderer แต่มันเปลี่ยนทั้งร่างกาย

คลาสผูกมุม 2.x บนแท็กร่างกาย

ฉันกำลังทำงานกับแอพ angular2 ขนาดใหญ่และการเปลี่ยนตัวเลือกรูทจะส่งผลกระทบต่อโค้ดจำนวนมากฉันจะต้องเปลี่ยนรหัสจำนวนมาก

กรณีการใช้งานของฉันคือ:

เมื่อฉันเปิดส่วนประกอบโมดอล (สร้างแบบไดนามิก) ฉันต้องการให้แถบเลื่อนเอกสารซ่อน

ฉันชอบที่จะแสดงความคิดเห็น แต่เนื่องจากชื่อเสียงที่ขาดหายไปฉันจึงเขียนคำตอบ ฉันรู้ความเป็นไปได้สองอย่างในการแก้ปัญหานี้

1. ใส่เอกสารสากล มันอาจไม่ใช่แนวทางปฏิบัติที่ดีที่สุดเพราะฉันไม่รู้ว่า nativescript etc รองรับหรือไม่ แต่อย่างน้อยก็ดีกว่าใช้ JS บริสุทธิ์

ตัวสร้าง (เอกสารส่วนตัว @Inject (DOCUMENT): เอกสาร) {}

ngOnInit () {
   this.document.body.classList.add ('ทดสอบ');
}

ดีและอาจจะดีกว่า คุณสามารถฉีดตัวแสดงผลหรือตัวแสดงผล 2 (บน NG4) และเพิ่มคลาสด้วยตัวแสดงผล

คลาสส่งออก myModalComponent ใช้ OnDestroy {

  ตัวสร้าง (ตัวแสดงผลส่วนตัว: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

แก้ไขสำหรับ ANGULAR4:

นำเข้า {Component, OnDestroy, Renderer2} จาก "@ angular / core";

คลาสส่งออก myModalComponent ใช้ OnDestroy {

  ตัวสร้าง (ตัวแสดงผลส่วนตัว: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

ฉันคิดว่าวิธีที่ดีที่สุดคือการรวมกันของทั้งสองวิธีโดย DaniS ด้านบน: การใช้ renderer เพื่อตั้งค่า / ลบคลาสจริง ๆ แต่ยังใช้ document injector ดังนั้นจึงไม่ขึ้นอยู่กับอย่างมาก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');
    }
}