Angular 2: Làm thế nào để tạo kiểu phần tử máy chủ của thành phần?

Tôi có thành phần trong Angular 2 được gọi là my-comp:

<my-comp></my-comp>

Làm thế nào để một phong cách thành phần chủ của thành phần này trong Angular 2?

Trong Polyme, bạn sẽ sử dụng bộ chọn ": host". Tôi đã thử nó trong Angular 2. Nhưng nó không hoạt động.

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

Tôi cũng đã thử sử dụng thành phần làm bộ chọn:

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

Cả hai cách tiếp cận dường như không hiệu quả.

Cảm ơn.

Có một lỗi, nhưng nó đã được sửa trong lúc này. :host { }làm việc tốt bây giờ

Cũng được hỗ trợ là

• :host(selector) { ... }cho selectorphù hợp với các thuộc tính, các lớp học, ... trên các yếu tố chủ

• :host-context(selector) { ... }cho selectorphù hợp với các yếu tố, các lớp học, ... vào các thành phần cha mẹ

• selector /deep/ selector(bí danh selector >>> selectorkhông hoạt động với SASS) để các kiểu khớp với các ranh giới phần tử

  • CẬP NHẬT: SASS đang phản đối /deep/.
    Angular (TS và Dart) được thêm vào ::ng-deepnhư một sự thay thế cũng tương thích với SASS.

  • UPDATE2: ::slotted ::slotted hiện được hỗ trợ bởi tất cả các trình duyệt mới và có thể được sử dụng với `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::sliated

Xem thêm Tải kiểu css bên ngoài vào Thành phần Angular 2

/deep/và >>>đang không bị ảnh hưởng bởi các combinators chọn tương tự mà trong Chrome mà không được tán thành.
Angular giả lập (viết lại) chúng, và do đó không phụ thuộc vào các trình duyệt hỗ trợ chúng.

Đây cũng là lý do tại sao /deep/và >>>không hoạt động với việc ViewEncapsulation.Nativekích hoạt DOM bóng gốc và phụ thuộc vào hỗ trợ trình duyệt.

Tôi đã tìm thấy một giải pháp làm thế nào để chỉ phong cách thành phần. Tôi chưa tìm thấy tài liệu nào về cách thức hoạt động của nó, nhưng bạn có thể đặt các giá trị thuộc tính vào chỉ thị thành phần, dưới thuộc tính 'máy chủ' như thế này:

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

CẬP NHẬT: Như Günter Zöchbauer đã đề cập, đã có một lỗi và bây giờ bạn có thể định kiểu phần tử máy chủ ngay cả trong tệp css, như thế này:

:host{ ... }

Kiểm tra vấn đề này . Tôi nghĩ rằng lỗi sẽ được giải quyết khi logic tiền biên dịch mẫu mới sẽ được triển khai. Bây giờ tôi nghĩ điều tốt nhất bạn có thể làm là bọc mẫu của bạn vào <div class="root">và tạo kiểu này div:

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

Xem cái này

Trong Thành phần của bạn, bạn có thể thêm. Class vào phần tử máy chủ nếu bạn có một số kiểu chung mà bạn muốn áp dụng.

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

Đối với bất cứ ai đang tìm cách tạo kiểu cho các phần tử con của :hostđây là một ví dụ về cách sử dụng::ng-deep

:host::ng-deep <child element>

ví dụ :host::ng-deep span { color: red; }

Như những người khác nói /deep/là không tán thành

Hãy thử: máy chủ> / sâu /:

Thêm phần sau vào tệp Parent.component.less

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

Thay thế thành phần ứng dụng con bằng bộ chọn con của bạn