我的組件有問題： 1. 由于某種原因，我無法在 signin.component.css 中設(shè)置 html 和 body 的樣式 我發(fā)現(xiàn)的解決方案是使用：encapsulation: ViewEncapsulation.None ==> This works perfect但是，當(dāng)我更改視圖時(shí)，例如：home，signin.component.css 被繼承到 home 組件中。難道是有什么問題嗎？或者有人知道如何在 css 組件中設(shè)置 html 和 body 的樣式嗎？提前致謝。
2 回答
蕪湖不蕪
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
改變封裝很少是一件好事。我將創(chuàng)建一個(gè)狀態(tài)服務(wù)來更改組件的類和樣式。
它應(yīng)該看起來像這樣
服務(wù)
import { Injectable } from '@angular/core';
@Injectable()
export class StyleService {
private className: Subject<string> = new Subject<string>();
public className$: Observable<string> = this.className.asObservable();
set(className: string): any {
this.className.next(className);
}
}
為了聆聽變化
...
private sub: Subscription;
...
this.sub = this.styleService.className$
.subscribe(class => {
// do what you need to do
})
...
ngOnDestroy() {
// so you dont have memory leaks
this.sub.unsubscribe();
}
當(dāng)您想更改類時(shí)，您只需調(diào)用 set 函數(shù)即可。唯一缺少的是在主樣式文件中聲明類。
如果您需要有一個(gè) className 初始值，您可以使用BehaviorSubject，如下所示：
private class: BehaviorSubject<string> = new BehaviorSubject<string>('className');
UYOU
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
我自己發(fā)現(xiàn)了這個(gè)問題
感謝所有幫助過我的人。
問題是無法在組件 css 中編輯 html 和 body html 標(biāo)簽。正確的方法是刪除 ViewEncapsultation 并將以下代碼行添加到構(gòu)造函數(shù)中。
document.body.style.backgroundImage = 'url(\'../../../assets/images/background.jpg\')';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.height = '100%';
這是您在每個(gè)組件中設(shè)置 html 和 body 標(biāo)簽樣式的方法。如果您需要設(shè)計(jì)整個(gè)背景的樣式，這也適用。
- 2 回答
- 0 關(guān)注
- 149 瀏覽
添加回答
舉報(bào)
0/150
提交
取消