Как я могу загрузить CSS из модуля, чтобы повлиять на все стили документа в угловых

Question

При разработке модуля входа в систему.У меня была встроенная тема в html, которую мне нужно было интегрировать в мой модуль входа в систему.
Теперь требуется, чтобы тело html включало пользовательский CSS (login.page.css).
Один из способов - добавить пользовательский CSS в тело index.html, но затем этот CSS будет применяться к каждой странице, которую я буду отображать в будущем, где она мне даже не понадобится.Так что я устал от этого кода ниже ...

//FileName: login.component.ts
@Component({
    selector: 'login-app' ,
    templateUrl: './login.component.html',
    styleUrls: ['./login.page.css', './login.component.css']
})

export class LoginComponent implements OnInit {

    ngOnInit(){
        let body = document.getElementsByTagName('body')[0];
        //body.classList.add("theme-default");   //add the class
        body.classList.add("page-signin");   //add the class
    }

Он успешно работал при добавлении CSS к телу, но не смог изменить стиль тела.

Answer 1

* Исправление

Используйте ViewEncapsulation для достижения этой цели ...

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'login-app' ,
    templateUrl: './login.component.html',
    styleUrls: ['./login.page.css', './login.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class LoginComponent implements OnInit {

    ngOnInit(){
        let body = document.getElementsByTagName('body')[0];
        //body.classList.add("theme-default");   //add the class
        body.classList.add("page-signin");   //add the class
    }
}

В этом коде функция ngOnInit и несколько js-кодов используются для вставки моего css в тело.Но это не будет отображать login.page.css в DOM, а будет отображаться в shadow DOM , поэтому этот стиль CSS будет использоваться только для текущего модуля, а не для тела.Для этого в @Component используйте код

encapsulation: ViewEncapsulation.None

, и это позволит моему css отображать основные элементы dom.Я был бы признателен за лучшее решение для вас, ребята, но если ничего не получится.Попробуйте этот код!