我有以下 4 個組件：
<app-game-control (intervalFired)="onEmittedCount($event)"></app-game-control>
<div class="row">
<div class="col-xs-2">
<app-odd *ngFor="let evenNumber of arrEvenNumber;index as i" [number]="evenNumber" >
</app-odd>
</div>
<div class="col-xs-2">
<app-even *ngFor="let oddNumber of arrOddNumber" [number]="oddNumber">
</app-even>
</div>
</div>
第四個組件是 app.module，它是父組件
這是奇怪的組件::
<p class="odd">odd - {{number}}</p>
我想讓“奇”類有紅色背景。我可以通過將樣式添加到 odd.component.css 來實作
我想將樣式添加到“app.component.css”的父組件
我怎么做？
我也嘗試了以下但沒有運氣::
<app-game-control (intervalFired)="onEmittedCount($event)"></app-game-control>
<div class="row">
<div class="col-xs-2">
<app-odd *ngFor="let evenNumber of arrEvenNumber;index as i" [number]="evenNumber" >
</app-odd>
</div>
<div class="col-xs-2">
<app-even class="even" *ngFor="let oddNumber of arrOddNumber" [number]="oddNumber">
</app-even>
</div>
</div>
應用程式模塊.css::
.even {
background-color: red;
}
uj5u.com熱心網友回復：
避免使用 ::ng-deep，因為它已被棄用；您還應該ViewEncapsulation.None格外小心地使用，因為這意味著您在父組件中定義的任何類和其他樣式都會滲透到所有子組件中。這種封裝存在的原因是，隨著您的應用程式的增長，您最終不會遇到組件之間的樣式沖突和無法理清的規則網。
對于您的特定用例，我建議您將樣式保留在子組件中，但:host像??這樣使用偽選擇器：
:host.background-red {
background: red;
}
:host.background-blue {
background: blue;
}
然后，您可以從父級指定類
<app-odd class="background-red"></app-odd>
這意味著您可以根據父級指定的內容設定不同的樣式，但仍保持封裝并讓組件僅公開在其自己的背景關系中起作用的樣式選項。
uj5u.com熱心網友回復：
每當我必須創建一個可以跨不同組件使用的通用樣式時，我都會使用根樣式表，通常是styles.scss檔案。
如果您在此檔案中添加odd, evencss 類，app-odd,app-even無需:host或即可獲取這些類::ng-deep。您還可以將 css 類限制為某些組件，方法是使用組件選擇器將它們包裹起來。
// apply to any app-odd or app-even components within my-app
my-app {
app-odd {
.odd {
background-color: red;
}
}
app-even {
.even {
background-color: green;
}
}
}
// apply to all app-odd/app-even components
app-odd {
.odd {
background-color: red;
}
}
app-even {
.even {
background-color: green;
}
}
// apply to all odd and even classes everywhere
.odd {
background-color: red;
}
.even {
background-color: green;
}
Stackblitz 演示
uj5u.com熱心網友回復：
您可以使用選擇器::ng-deep
:host ::ng-deep .odd {
background: red;
}
使用:host選擇器，使樣式保留在父級中，而不會滲透到其他組件中。請注意，它::ng-deep已被棄用。
uj5u.com熱心網友回復：
在子組件中禁用視圖封裝
@Component({
selector: 'app-odd',
templateUrl: './odd.component.html',
styleUrls: ['./odd.component.scss'],
encapsulation: ViewEncapsulation.None,
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535098.html
標籤：有角度的