Açısal 2: Bileşenin ana bilgisayar öğesi nasıl şekillendirilir?

Açısal 2'de my-comp adlı bileşenim var:

<my-comp></my-comp>

Açısal 2'de bu bileşenin ana bilgisayar öğesi nasıl şekillendirilir?

Polimerde ": host" seçicisini kullanırsınız. Açısal 2'de denedim. Ama işe yaramıyor.

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

Ayrıca bileşeni seçici olarak kullanmayı denedim:

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

Her iki yaklaşım da işe yaramıyor gibi görünüyor.

Teşekkürler.

Bir hata vardı, ancak bu arada düzeltildi. :host { }şimdi iyi çalışıyor.

Ayrıca desteklenenler

• :host(selector) { ... }ana selectoröğedeki nitelikleri, sınıfları, ... eşleştirmek için

• :host-context(selector) { ... }selectorana bileşenlerdeki öğeleri, sınıfları, ... eşleştirmek için

• selector /deep/ selector(takma ad selector >>> selectorSASS ile çalışmaz) stillerin öğe sınırları boyunca eşleşmesi için

  • GÜNCELLEME: SASS reddediyor /deep/. SASS ile de uyumlu olan yedek olarak
    açısal (TS ve Dart) eklendi ::ng-deep.

  • UPDATE2: ::slotted ::slotted artık tüm yeni tarayıcılar tarafından destekleniyor ve `ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted ile kullanılabilir
    

Ayrıca bkz . Angular 2 Bileşenine harici css stilini yükleme

/deep/ve >>>edilir etkilenmez Chrome'da artık kullanılmamaktadır aynı seçici, bağdaştırıcılarla.
Açısal onları taklit eder (yeniden yazar) ve bu nedenle onları destekleyen tarayıcılara bağlı değildir.

Bu aynı zamanda yerel gölge DOM'yi etkinleştiren ve tarayıcı desteğine bağlı olan /deep/ve neden >>>çalışmıyor ViewEncapsulation.Native.

Ben sadece bileşen elemanı stil nasıl bir çözüm buldum. Nasıl çalıştığına dair herhangi bir belge bulamadım, ancak bileşen yönergesine öznitelik değerlerini şu şekilde 'host' özelliğinin altına koyabilirsiniz:

@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;
}

GÜNCELLEME: Günter Zöchbauer'ın belirttiği gibi, bir hata vardı ve şimdi host öğesini css dosyasında bile şu şekilde şekillendirebilirsiniz:

:host{ ... }

Bu sorunu kontrol edin . Yeni şablon ön derleme mantığı uygulanacağı zaman hatanın çözüleceğini düşünüyorum . Şimdilik yapabileceğiniz en iyi şablon içine sarmak <div class="root">ve bu stil olduğunu düşünüyorum div:

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

Bu dalma makinesine bakın

Bileşeninizde, uygulamak istediğiniz bazı genel stiller varsa ana bilgisayar öğenize .class ekleyebilirsiniz.

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

:hostBurada bir alt öğeye stil vermek isteyen herkes için nasıl kullanılacağına bir örnek::ng-deep

:host::ng-deep <child element>

Örneğin :host::ng-deep span { color: red; }

Diğerlerinin söylediği gibi /deep/kullanımdan kaldırıldı

Şunu deneyin: host> / deep /:

Parent.component.less dosyasına aşağıdakini ekleyin

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

App-child-bileşenini çocuk seçicinizle değiştirin