Gaya sudut 2 - gaya dalamHTML

Saya mendapatkan potongan kode HTML dari panggilan HTTP. Saya meletakkan blok HTML dalam sebuah variabel dan menyisipkannya di halaman saya dengan [innerHTML] tetapi saya tidak bisa mendesain blok HTML yang dimasukkan. Adakah yang punya saran bagaimana saya bisa mencapai ini?

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

HTML yang ingin saya gaya adalah blok yang terdapat dalam variabel "kalender".

pembaruan 2 ::slotted

::slotted sekarang didukung oleh semua browser baru dan dapat digunakan dengan ViewEncapsulation.ShadowDom

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

perbarui 1 :: ng-sedalam

/deep/sudah usang dan diganti dengan ::ng-deep.

::ng-deep juga sudah ditandai usang, tetapi belum ada pengganti yang tersedia.

Ketika ViewEncapsulation.Nativedidukung dengan baik oleh semua browser dan mendukung penataan batas bayangan DOM, ::ng-deepmungkin akan dihentikan.

asli

Angular menambahkan semua jenis kelas CSS ke HTML yang ditambahkannya ke DOM untuk meniru bayangan DOM CSS enkapsulasi untuk mencegah gaya pendarahan masuk dan keluar dari komponen. Angular juga menulis ulang CSS yang Anda tambahkan agar sesuai dengan kelas yang ditambahkan ini. Untuk HTML ditambahkan menggunakan [innerHTML]kelas-kelas ini tidak ditambahkan dan CSS yang ditulis ulang tidak cocok.

Sebagai solusinya coba

• untuk CSS ditambahkan ke komponen

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

• untuk CSS ditambahkan ke index.html

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

>>>(dan yang setara /deep/tetapi /deep/bekerja lebih baik dengan SASS) dan ::shadowditambahkan dalam 2.0.0-beta.10. Mereka mirip dengan penggabung bayangan DOM CSS (yang sudah usang) dan hanya berfungsi dengan encapsulation: ViewEncapsulation.Emulatedyang merupakan default di Angular2. Mereka mungkin juga bekerja samaViewEncapsulation.None tetapi kemudian hanya diabaikan karena mereka tidak perlu. Combinator ini hanya solusi perantara sampai fitur yang lebih canggih untuk penataan komponen silang didukung.

Pendekatan lain adalah menggunakan

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

untuk semua komponen yang memblokir CSS Anda (tergantung pada tempat Anda menambahkan CSS dan di mana HTML ingin Anda gaya - mungkin semua komponen dalam aplikasi Anda)

Memperbarui

Contoh Plunker

Solusi sederhana yang perlu Anda ikuti adalah

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

constructor(private sanitizer: DomSanitizer){}

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

Jika Anda mencoba menata elemen HTML yang ditambahkan secara dinamis di dalam komponen Angular, ini mungkin berguna:

// 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(), '')
}

Dugaan saya adalah bahwa konvensi untuk atribut ini tidak dijamin stabil di antara versi Angular, sehingga orang mungkin akan mengalami masalah dengan solusi ini ketika meningkatkan ke versi baru Angular (walaupun, memperbarui solusi ini kemungkinan akan sepele karena kasus).

Kami sering menarik konten dari CMS kami sebagai [innerHTML]="content.title". Kami menempatkan kelas yang diperlukan di styles.scssfile root aplikasi daripada di file scss komponen. CMS kami dengan sengaja menghapus gaya in-line sehingga kami harus menyiapkan kelas yang dapat digunakan penulis dalam konten mereka. Ingat menggunakan {{content.title}}dalam template tidak akan membuat html dari konten.

Jika Anda menggunakan sass sebagai preprocessor gaya, Anda dapat kembali ke kompiler Sass asli untuk dependensi dev dengan:

npm install node-sass --save-dev

Sehingga Anda bisa tetap menggunakan / mendalam / untuk pengembangan.