Angular2 thêm lớp vào thẻ nội dung

Làm cách nào tôi có thể thêm một lớp vào thẻ body mà không đặt phần thân làm bộ chọn ứng dụng và sử dụng liên kết máy chủ?

Tôi đã thử sử dụng Trình kết xuất nhưng nó thay đổi toàn bộ cơ thể

Lớp liên kết Angular 2.x trên thẻ body

Tôi đang làm việc trên một ứng dụng angle2 lớn và việc thay đổi bộ chọn gốc sẽ ảnh hưởng đến rất nhiều mã, tôi sẽ phải thay đổi rất nhiều mã

Trường hợp sử dụng của tôi là:

Khi tôi mở một thành phần phương thức (được tạo động), tôi muốn thanh cuộn tài liệu ẩn

Tôi rất thích bình luận. Nhưng do không có danh tiếng, tôi viết một câu trả lời. Tôi cũng biết hai khả năng để giải quyết vấn đề này.

1. Tiêm Tài liệu Toàn cục. Vâng, nó có thể không phải là phương pháp hay nhất vì tôi không biết liệu bản địa chỉ, v.v. có hỗ trợ điều đó hay không. Nhưng ít nhất nó tốt hơn so với sử dụng JS thuần túy.

phương thức khởi tạo (@Inject (DOCUMENT) tài liệu riêng: Tài liệu) {}

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

Chà và có lẽ còn tốt hơn. Bạn có thể chèn trình kết xuất hoặc trình kết xuất 2 (trên NG4) và thêm lớp với trình kết xuất.

xuất lớp myModalComponent triển khai OnDestroy {

  hàm tạo (trình kết xuất riêng: Renderer) {
    this.renderer.setElementClass (document.body, 'modal-open', true);
   }

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

CHỈNH SỬA CHO ANGULAR4:

nhập {Component, OnDestroy, Renderer2} từ '@ angle / core';

xuất lớp myModalComponent triển khai OnDestroy {

  hàm tạo (trình kết xuất riêng: Renderer2) {
    this.renderer.addClass (document.body, 'modal-open');
   }

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

Tôi nghĩ cách tốt nhất để làm điều đó là sự kết hợp của cả hai cách tiếp cận của DaniS ở trên: Sử dụng trình kết xuất để thực sự thiết lập / xóa lớp, nhưng cũng sử dụng bộ tiêm tài liệu, vì vậy nó không phụ thuộc nhiều vào window.documentnhưng có thể được thay thế động (ví dụ: khi kết xuất phía máy chủ). Vì vậy, toàn bộ mã sẽ trông như thế này:

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