Angular 2: Bagaimana menata elemen host komponen?

189

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.

— Ravi Teja Gudapati
sumber

2

Apakah Anda yakin gaya ini tidak diterapkan? Saya telah membuat proyek dasar dan melakukan hal itu dan berhasil. Saya telah mengatur my-selector { color : red}css saya dan berfungsi dengan baik.

— Pacane

1

Pada beta 7, pemilih: host bekerja untuk saya.

— Jon Swanson

Angular 2 Component styles

— Ondra Žižka

285

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.

— Günter Zöchbauer
sumber

@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}

— Günter Zöchbauer

@ OndraŽižka dapatkah Anda menjelaskan lebih lanjut? Ini adalah CSS murni, bagaimana bisa tidak konsisten dengan CSS dan itu sendiri?

— Günter Zöchbauer

Kecuali saya telah melewatkan beberapa pergeseran penting dalam CSS, / deep / dan >>> bukan CSS.

— Ondra Žižka

Mereka sudah usang, tetapi itu tidak masalah. Mereka ditiru oleh Angular (ditulis ulang), oleh karena itu mereka hanya bekerja dengan ViewEncapsularion.Emulated(default) tetapi tidak dengan Native.

— Günter Zöchbauer

Di Angular 2.4.7 saya bisa mulai :host { p { font-size: 80%; } }bekerja di ... file component.css. Segera setelah saya mencoba menggunakannya dengan styles: [:host { p { font-size: 80%; } }]itu tidak lagi berfungsi. Sangat aneh.

— Martin

39

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{ ... }

— prespik
sumber

1

Saya suka ini lebih baik daripada membuat elemen .root dummy, tapi saya tidak suka itu menetapkan gaya ini sebagai inline (memaksa a !importantuntuk menimpanya). Pasti ada waayy yang lebih baik: \

— Scrimothy

4

tidak ada, styling melalui host{}dalam stylesUrlberkas tidak bekerja. kebutuhan :host.

— phil294

bagaimana kita bisa mengakses variabel komponen di dalam host? Jika saya ingin memutuskan warna latar belakang secara dinamis? ': host {background-color: this.bgColor; } '

— Pratap AK

@ PratapA.K Hai, Anda dapat menggunakan derorator HostBinding. Contoh Anda adalah: @HostBinding('style.background-color') private color = 'lime'; Google akan menemukan Anda banyak contoh dan artikel.

— prespic

11

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

— alexpods
sumber

9

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';

— Xquick
sumber

6

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

— Petros Kyriakou
sumber

4

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

— abahet
sumber

Bagaimana jika Anda menginginkan stylesheet seperti bootstrap di sana alih-alih satu gaya?

— Aditya Vikas Devarapalli