Nasıl ve nerede kullanılır :: ng-deep?

Angular 4'te yeniyim, bu yüzden biri Angular 4'te nasıl ve nerede kullanılacağını açıklayabilir ::ng-deepmi?

Aslında, üst bileşenlerden alt bileşenlerin bazı CSS özelliklerinin üzerine yazmak istiyorum. Üstelik IE11'de destekleniyor mu?

Genellikle /deep/ “shadow-piercing”birleştirici, bir stili zorlamak için kullanılabilir child components. Bu seçicinin bir takma adı >>> ve şimdi :: ng-deep adında başka bir ad var.

beri /deep/ combinatorkullanımdan kaldırıldı kullanımda önerilir::ng-deep

Örneğin:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

ve css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

alt bileşenlere uygulanacak

KULLANIM

::ng-deep, >>>Ve /deep/belirli CSS kurallarını devre dışı görünümü kapsülleme, diğer bir deyişle, bu size bileşenin HTML olmayan DOM öğeleri, erişim sağlar. Örneğin, Angular Material (veya bunun gibi başka bir üçüncü taraf kitaplığı) kullanıyorsanız, oluşturulan bazı öğeler bileşeninizin alanı ( iletişim kutusu gibi ) dışındadır ve bu öğelere doğrudan veya normal bir CSS kullanarak erişemezsiniz. yol. Bu öğelerin stillerini değiştirmek istiyorsanız, şu üç şeyden birini kullanabilirsiniz, örneğin:

::ng-deep .mat-dialog {
  /* styles here */
}

Şimdilik Angular ekibi, yalnızca Öykünülmüş görünüm kapsüllemesiyle "derin" manipülasyonlar yapılmasını tavsiye ediyor .

KORUNMA

"Derin" manipülasyonlar da aslında kullanımdan kaldırıldı , AMA şimdilik hala çalışıyor çünkü Angular ön işleme desteği veriyor ( ::ng-deepbugün reddetmek için acele etmeyin , önce kullanımdan kaldırma uygulamalarına bir göz atın ).

Her neyse, bu yolu izlemeden önce, görünüm kapsülleme yaklaşımını devre dışı bırakmaya bir göz atmanızı tavsiye ederim (ki bu da ideal değildir, stillerinizin diğer bileşenlere sızmasına izin verir), ancak bazı durumlarda daha iyi bir yol. Görünüm kapsüllemeyi devre dışı bırakmaya karar verdiyseniz, CSS kuralları kesişiminden kaçınmak ve son olarak stil sayfalarınızda karışıklık olmasını önlemek için belirli sınıfları kullanmanız şiddetle önerilir. Doğrudan bileşenin .tsdosyasında devre dışı bırakmak gerçekten çok kolay :

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Bu makalede görünüm kapsülleme hakkında daha fazla bilgi bulabilirsiniz .

::ng-deepEbeveynin kapsüllenmiş bir css sınıfı olmasını zorunlu kılarak bir bileşenin yalnızca çocuklarıyla sınırlandırmanın önemini vurgulamak isterim .

Bunun işe yaraması ::ng-deepiçin ebeveynden sonra kullanılması önemlidir , aksi takdirde bileşen yüklendiği anda aynı ada sahip tüm sınıflar için geçerli olacaktır.

Bileşen css:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

Bileşen şablonu:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

Ortaya çıkan (Açısal oluşturulmuş) css:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

DÜZENLE:

:hostYeni bir css sınıfı oluşturmak yerine anahtar kelimeyi kullanarak aynı davranışı elde edebilirsiniz .

:host ::ng-deep .mat-checkbox-layout

Açısal kılavuzda :host-contextdoğrudan yukarıdaki açıklamayı kaçırmamaya dikkat edin ::ng-deep: https://angular.io/guide/component-styles . Şimdiye kadar kaçırdım ve keşke daha önce görseydim.

::ng-deepgenellikle bileşeni yazmadığınızda ve kaynağına erişiminiz olmadığında gereklidir, ancak :host-contextbunu yaptığınızda çok yararlı bir seçenek olabilir.

Örneğin <h1>, tasarladığım bir bileşenin içinde siyah bir başlığım var ve koyu temalı bir arka planda görüntülendiğinde bunu beyaza çevirme yeteneğini istiyorum.

Kaynağa erişimim yoksa bunu ebeveyn için css'de yapmam gerekebilir:

.theme-dark widget-box ::ng-deep h1 { color: white; }

Ancak bunun yerine :host-context, bunu bileşenin içinde yapabilirsiniz .

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

Bu, bileşen zincirinde herhangi bir yere bakar .theme-darkve bulunursa css'yi h1'e uygular. Bu, ::ng-deepçoğu zaman gerekli olsa da biraz anti-model olan çok fazla güvenmeye iyi bir alternatiftir .

Bu durumda, &ile değiştirilir h1(sass / scss böyle çalışır), böylece çok kullanışlı olan 'normal' ve temalı / alternatif css'inizi hemen yan yana tanımlayabilirsiniz.

Doğru numarayı almaya dikkat edin :. Çünkü ::ng-deepiki tane var ve :host-contextsadece biri için.

Sadece bir güncelleme:

Kullanımdan kaldırılmış gibi görünen ::ng-deepyerine kullanmalısınız /deep/.

Belgelere göre:

Gölge delici alt birleştirici kullanımdan kaldırıldı ve büyük tarayıcılardan ve araçlardan destek kaldırılıyor. Bu nedenle Angular'da desteği bırakmayı planlıyoruz (/ deep /, >>> ve :: ng-deep'un 3'ü için). O zamana kadar :: ng-deep, aletlerle daha geniş bir uyumluluk için tercih edilmelidir.

Burada bulabilirsin

Dikkatli bir şekilde :: ng-deep kullanın. Uygulamamın tamamında malzeme tasarımı araç çubuğu rengini uygulamamda farklı renklere ayarlamak için kullandım, bunu yalnızca uygulama araç çubuğu renklerini birbiri üzerinde test ederken bulmak için kullandım. Öğrenmek için gelin, çünkü bu tarzlar küresel hale geliyor, bu makaleye bakın İşte diğer bileşenlere sızmayan bir çalışma kodu çözümü.

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}