Angular 2: Bagaimana menata elemen host komponen?

Saya memiliki komponen dalam Angular 2 yang disebut my-comp:

<my-comp></my-comp>

Bagaimana satu gaya elemen host komponen ini di Angular 2?

Di Polymer, Anda akan menggunakan pemilih ": host". Saya mencobanya di Angular 2. Tetapi tidak berhasil.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

Saya juga mencoba menggunakan komponen sebagai pemilih:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

Kedua pendekatan itu tampaknya tidak berhasil.

Terima kasih.

Ada bug, tetapi sudah diperbaiki sementara itu. :host { }berfungsi dengan baik sekarang.

Juga didukung

• :host(selector) { ... }untuk selectormencocokkan atribut, kelas, ... pada elemen host

• :host-context(selector) { ... }untuk selectormencocokkan elemen, kelas, ... pada komponen induk

• selector /deep/ selector(alias selector >>> selectortidak berfungsi dengan SASS) agar gaya cocok dengan batas-batas elemen

  • UPDATE: SASS sudah usang /deep/.
    Angular (TS dan Dart) ditambahkan ::ng-deepsebagai pengganti yang juga kompatibel dengan SASS.

  • UPDATE2: ::slotted ::slotted sekarang didukung oleh semua browser baru dan dapat digunakan dengan `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Lihat juga Memuat gaya css eksternal ke dalam Komponen 2 Sudut

/deep/dan >>>yang tidak terpengaruh oleh combinators pemilih yang sama yang di Chrome yang usang.
Angular mengemulasi (menulis ulang) mereka, dan karenanya tidak bergantung pada browser yang mendukungnya.

Ini juga mengapa /deep/dan >>>tidak bekerja dengan ViewEncapsulation.Nativeyang memungkinkan DOM bayangan asli dan tergantung pada dukungan browser.

Saya telah menemukan solusi bagaimana mendesain elemen elemen saja. Saya belum menemukan dokumentasi cara kerjanya, tetapi Anda dapat memasukkan nilai atribut ke dalam direktif komponen, di bawah properti 'host' seperti ini:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

UPDATE: Seperti yang dikatakan Günter Zöchbauer, ada bug, dan sekarang Anda dapat menata elemen host bahkan dalam file css, seperti ini:

:host{ ... }

Lihat masalah ini . Saya pikir bug akan teratasi ketika logika prekompilasi template baru akan diimplementasikan. Untuk saat ini saya pikir yang terbaik yang dapat Anda lakukan adalah membungkus template Anda <div class="root">dan gaya ini div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

Lihat penyedot ini

Dalam Komponen Anda, Anda dapat menambahkan .class ke elemen host Anda jika Anda ingin memiliki beberapa gaya umum yang ingin Anda terapkan.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Bagi siapa pun yang ingin menata elemen anak di :hostsini adalah contoh cara menggunakannya::ng-deep

:host::ng-deep <child element>

misalnya :host::ng-deep span { color: red; }

Seperti yang orang lain katakan /deep/sudah usang

Coba: host> / deep /:

Tambahkan berikut ini ke file parent.component.less

:host {
    /deep/ app-child-component {
       //your child style
    }
}

Ganti komponen aplikasi-anak dengan pemilih anak Anda