javascript - Angular Bileşen CSS kapsülleme nasıl çalışır?

İki stil sayfası oluşturursam bunu anlamak istiyorum

Stil 1

.heading {
  color: green;
}

Stil 2

.heading {
  color: blue;
}

Şimdi eğer bu iki stil iki farklı görünümde yazılırsa, bir düzen üzerinde Kısmi Görünüm olarak renderlendiğinde, bu durumda bir çakışma meydana gelebilir ve biri diğerinin stilini geçersiz kılabilir.

AMA

Angular'ı kullanarak (sayfa 16'ya bakın), farklı bileşenlerdeki bu iki stil, kapsüllemeye rağmen aynı sayfada nasıl görüntüleniyor? CSS neden geçersiz kılınmıyor?

Örneğin

import { Component } from '@angular/core';

@Component({
 selector: 'app-user-item',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user-item.css

.heading{ color :green}

app-user.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'app-user',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user.css

.heading{ color :blue}

Bunu bir sayfada görüntülerken:

<app-user></app-user>
<app-user-item></app-user-item>

Bu sonuç:

Cevap #1

Angular (varsayılan olarak) bir gölge DOM taklidi yapar.

Bu, yalnızca o bileşendeki öğelere uygulanabilen bazı HTML özniteliklerini dinamik olarak oluşturur.

Örneğin:

<app-user></app-user>
<app-user-item></app-user-item>

dönüştürülecek

<app-user _ngcontent-1></app-user>
<app-user-item _ngcontent-2></app-user-item>

Ve CSS’iniz şu şekilde dönüştürülecek:

.heading[_ngcontent-1] { color: blue }
.heading[_ngcontent-2] { color: green }

Daha kapsamlı bir açıklamayı burada ve dokümantasyonu burada bulabilirsiniz

Cevap #2

Angular, kutudan çıktığı gibi CSS kapsülleme ile gelir. Yeni bir proje oluşturulduğunda, varsayılan olarak projenin kökündeki styles.css dosyası uygulamaya global olarak uygulanır ve foo.component.css dosyasında bulunan stiller gibi bileşen stilleri yalnızca foo bileşenine uygulanır ve başka hiçbir yere uygulanmaz. Ancak, bu Angular'da stillerin kapsüllenebileceği tek yol değildir, gelin daha yakından bakalım.@Component({ selector: 'app-foo', templateUrl: './foo.component.html', styleUrls: ['./foo.component.css'] })

İlgili makaleler