Yerine ne kullanılmalı :: ng-deep

Yönlendirici çıkışı tarafından yerleştirilen bir öğeyi açısal olarak biçimlendirmeye çalışıyorum ve oluşturulan öğenin% 100 genişliğe sahip olduğundan emin olmak istiyorum

Yanıtların çoğundan, ::ng-deepseçiciyi kullanmam gerektiğini görüyorum , ancak Angular'ın belgelerine göre bu, kullanımdan kaldırılıyor. Bir alternatif var mı ::ng-deep?

FWIW Araştırmamda, ng-deep veya diğer uygulanabilir alternatiflerin yerini alacak herhangi bir şey bulamadım. Bunun nedeni, inanıyorum ki, Angular ekibi, başlangıçta gibi seçicilere sahip olan gölge dom üzerindeki W3C spesifikasyonunu erteliyor deep. Bununla birlikte, W3c o zamandan beri tavsiyeyi kaldırdı, ancak yenisiyle değiştirmedi. Bu olana kadar, Angular ekibinin devam edeceğini ::ng-deepve alternatiflerinin mevcut olacağını , ancak W3C taslaklarının bekleme durumu nedeniyle kullanımdan kaldırılmış durumda olacağını düşünüyorum. Şu anda bunu yedekleyecek belgeleri bulmaya zaman ayıramıyorum, ancak yakın zamanda gördüm.

Uzun lafın kısası: ::ng-deepBir yedek oluşturulana kadar ve alternatiflerini kullanmaya devam edin - kullanımdan kaldırma sadece erken bir bildirimdir, böylece gerçek değişiklik gerçekleştiğinde insanlar kör kalmaz.

- GÜNCELLEME -

https://drafts.csswg.org/css-scoping-1/ İlgilendiğiniz takdirde teklif taslağı burada. Görünüşe göre gölge dom ağacı içindeki öğeler için sağlam bir seçici seti üzerinde çalışıyorlar; Bu spesifikasyon, bir kez onaylandıktan sonra, eğer varsa açısal klonu bilgilendireceğini düşünüyorum (yani, açısal, tarayıcılarda yayınlandıktan sonra kendi seçicilerini uygulamaya ihtiyaç duymayabilir).

Kullanımdan kaldırılanı atlamak için ::ng-deepgenellikle devre dışı bırakırım ViewEncapsulation. Bu en iyi yaklaşım olmasa da bana iyi hizmet etti.

Devre dışı bırakmak ViewEncapsulationiçin bileşeninizde aşağıdakileri yapın:

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

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

export class HeaderComponent {

}

Bu, bu bileşendeki .scss stillerini tüm uygulama için global hale getirecektir. Stillerin zincirde üst ve kardeş bileşenlere çıkmasına izin vermemek için, tüm scss'yi seçici ile şu şekilde sarın:

app-header {
  // your styles here and any child component styles can go here
}

Şimdi, burada belirtilen stiller alt bileşenlere gidecektir, bu nedenle css seçicilerinizde ekstra spesifik olmanız ve CSS eklerken p'lerinize ve q'larınıza dikkat etmeniz gerekir (belki Angular uygulamanızda ve ardından stillerinde belirtilen alt seçiciyi ekleyin).

Yukarıdaki paragraf nedeniyle en iyi yaklaşım olmadığını söylüyorum, ama bu bana iyi hizmet etti.

Derin bir stile basit ve kolay bir alternatif, ana bileşenin öğe seçicisini kullanan yaygın bir stildir. Yani, bunu hero-details.component.css dosyasında bulundurduysanız:

:host ::ng-deep h3 {
  font-style: italic;
}

Styles.css'de şu hale gelecekti:

app-hero-details h3 {
  font-style: italic;
}

Temelde derin bir stil, kapsüllenmemiş bir stildir, bu yüzden kavramsal olarak bana bir bileşen stilinden çok ortak bir stil gibi görünüyor. Şahsen ben artık derin stiller kullanmam. Büyük sürüm güncellemelerinde değişikliklerin kırılması normaldir ve kullanımdan kaldırılan özelliklerin kaldırılması adil bir oyundur.

Daha önce de belirtildiği gibi, üçüncü taraf bir kitaplık kullanıyorsanız, arada bir kullanmak zorunda kalmamak neredeyse imkansızdır ::ng-deep. Ancak ::ng-deep, tarayıcılar artık desteklenmediğinde önceki projelerinizle ilgili ne yapacaksınız ?

O ana hazır olmak için şunları önereceğim:

1. ViewEncapsulation'ı akıllıca kullanın . Bu, yalnızca daha derin bileşenlere erişmesi gereken bileşenler için geçerlidir.

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

2. Şimdi, çarpışmalardan ve CSS tuhaflığından kaçınmak için (kural olarak) bileşen şablonunuzu her zaman bir sınıfla sarmalısınız. Dolayısıyla, example.component.html şöyle olmalıdır:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

3. Yine, kural olarak, her bir SCSS dosyasının ilk satırı bileşen kabını hedefleyecektir. Kapsülleme olmadığından , üçüncü taraf bileşenlerini sınıflarını hedefleyerek değiştirebilirsiniz. Bununla birlikte, example.component.scss şöyle olmalıdır:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

Bu, :: ng-deep için genel bir ikame değildir, ancak soru yazarı tarafından açıklanan kullanım durumu için:

Bir yönlendirici prizi tarafından eklenen öğenin stilini belirlemek istediğiniz özel durumda, CSS'de bitişik komşu seçiciyi kullanan zarif bir çözüm vardır:

router-outlet+* {
  /* styling here... */
}

Bu, bir yönlendirici çıkışının doğrudan komşuları olan tüm unsurlar için geçerli olacaktır.

Daha fazla okuma:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Varsayılan kapsüllemeyi değiştirmekten kaçınmak için, bileşene genel stilleri ekleyen bir yardımcı yazdım:

deepStyle.ts

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

export function deepStyle(vcr: ViewContainerRef, csss: string[]){
    let id = 'deep-' + vcr.element.nativeElement.tagName;
    let styleElement = document.getElementById('pierce-' + vcr.element.nativeElement.name);
    if(!styleElement){
        styleElement = document.createElement('style');
        styleElement.id = id;
        styleElement.innerHTML = csss.map(css => vcr.element.nativeElement.tagName + ' ' + css).join('\n');
        document.head.append(styleElement);
    }
}

my-component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { deepStyle } from '../deepStyle';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
   constructor(vcr: ViewContainerRef) {
    deepStyle(vcr, [`
       img {
         height: 180px;
       }
    `]);
  }
}

sonuç:

<head>
...
<style id="deep-MY-COMPONENT">
    MY-COMPONENT img {
      height: 180px;
    }
</style>
...
</head>

"/ Deep /" kullanabilirsiniz. Bu :: ng-derin bir alternatif.

:host /deep/ h3 {
  font-style: italic;
}