Açısal 2 - iç HTML stili

HTTP çağrılarından HTML kodları alıyorum. Ben bir değişken HTML blokları koymak ve [innerHTML] ile sayfama eklemek ama eklenen HTML bloğu stil olamaz. Herkes bunu nasıl başarabilirim herhangi bir öneriniz var mı?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

Stil vermek istediğim HTML, "takvim" değişkeninde bulunan bloktur.

güncelleme 2 ::slotted

::slotted artık tüm yeni tarayıcılar tarafından desteklenmektedir ve ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

güncelleme 1 :: derin

/deep/, kullanımdan kaldırıldı ve yerine ::ng-deep.

::ng-deep de zaten kullanımdan kaldırılmış olarak işaretlenmiş, ancak henüz kullanılabilir bir değişiklik yok.

Ne zaman ViewEncapsulation.Nativedüzgün tüm tarayıcılarda ve genelinde gölge DOM sınırları stil destekleriyle, ::ng-deepmuhtemelen kesilecektir.

orijinal

Açısal, bileşenlerin içine ve dışına kanama stillerini önlemek için gölge DOM CSS kapsüllemesini taklit etmek için DOM'a eklediği HTML'ye her türlü CSS sınıfını ekler. Açısal ayrıca eklediğiniz CSS'yi bu eklenen sınıflarla eşleşecek şekilde yeniden yazar. [innerHTML]Bu sınıflar kullanılarak eklenen HTML için eklenmez ve yeniden yazılan CSS eşleşmez.

Geçici çözüm olarak deneyin

• bileşene CSS eklendi

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

• CSS için eklendi index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>(ve eşdeğeri /deep/ancak /deep/SASS ile daha iyi çalışır) ve ::shadow2.0.0-beta.10'da eklenmiştir. Gölge DOM CSS birleştiricilerine (kullanımdan kaldırılmıştır) benzerler ve yalnızca encapsulation: ViewEncapsulation.EmulatedAngular2'de varsayılan olanlarla çalışırlar. Muhtemelen birlikte çalışırlar, ViewEncapsulation.Noneancak ancak gerekli olmadıkları için göz ardı edilirler. Bu birleştiriciler, bileşenler arası şekillendirme için daha gelişmiş özellikler desteklenene kadar yalnızca bir ara çözümdür.

Başka bir yaklaşım kullanmak

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

CSS'nizi engelleyen tüm bileşenler için (CSS'yi nereye eklediğinize ve HTML'nin stilini oluşturmak istediğiniz yere bağlıdır - uygulamanızdaki tüm bileşenler olabilir )

Güncelleme

Örnek Plunker

İzlemeniz gereken basit çözüm

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

Açısal bir bileşenin içine dinamik olarak eklenen HTML öğelerini biçimlendirmeye çalışıyorsanız, bu yardımcı olabilir:

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

Benim tahminim, bu özellik için sözleşmenin Angular sürümleri arasında istikrarlı olması garanti edilmez, böylece Angular'ın yeni bir sürümüne yükseltilirken bu çözümle ilgili sorunlarla karşılaşabilir (ancak, bu çözümü güncellemek muhtemelen önemsiz olacaktır) durum).

İçeriği sıkça CMS'den alıyoruz [innerHTML]="content.title". Gerekli sınıfları styles.scss, bileşenin scss dosyası yerine uygulamanın kök dosyasına yerleştiririz. CMS'imiz bilerek satır içi stilleri çıkarır, böylece yazarın içeriklerinde kullanabileceği sınıflar hazırlamalıyız. {{content.title}}Şablonda kullanmanın içerikten html oluşturmayacağını unutmayın .

Sass'ı stil ön işlemcisi olarak kullanıyorsanız, geliştirici bağımlılığı için yerel Sass derleyicisine geri dönebilirsiniz:

npm install node-sass --save-dev

Böylece geliştirme için / deep / kullanmaya devam edebilirsiniz.