Kiểu dáng của thành phần Angular2 không được thừa kế trong thành phần con được đóng gói

Question

Tôi đang viết hai thành phần - componentA và componentB. trong đó componentA đóng gói componentB. Cả hai đều có thẻ 'p'. Trong componentA của tôi, tôi đang viết các kiểu: [p{color:red}] bên trong trang trí @Component của tôi. P của componentA được đổi thành màu đỏ nhưng màu của componentB vẫn là màu đen.

Tôi nghĩ rằng đó là lỗi cần được giải quyết.

Answer 1

Kiểu đóng gói (ngăn chặn kiểu chảy máu vào hoặc ra khỏi các thành phần) là tính năng chính của thành phần Góc.

Có những lựa chọn khác nhau để đạt được những gì bạn muốn

@Component({ 
    selector: 'component-b', 
    styles: [` 
    p { color: red; } 
    `] 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

hoặc bạn có thể thay đổi bộ chọn CSS để vượt qua ranh giới thành phần với thời gian gần đây giới thiệu (Angular2 chỉ) bóng xuyên CSS combinator >>>

@Component({ 
    selector: 'component-b', 
    styles: [` 
    :host >>> p { color: red; } 
    `] 
    ... 
}) 

Cách tiếp cận thứ 2 hoạt động với gói đóng gói mặc định (ViewEncapsulation.Emulated) hoặc encapsulation: ViewEncapsulation.None nhưng ở đây >>> là không cần thiết. Bạn không thể sử dụng >>> với encapsulation: ViewEncapsulation.Native - trên thực tế bạn hiện có thể nhưng >>> (hoặc tương đương /deep/) không còn được dùng cho DOM bóng.

gợi ý: /deep/ dường như làm việc tốt hơn với Sass hơn >>>

Answer 2

Nó không phải là một lỗi.

phong cách

Component thường chỉ áp dụng cho HTML trong mẫu riêng của thành phần - reference

Nếu bạn muốn phong cách mà bạn xác định trong một thành phần cha mẹ ảnh hưởng đến các thành phần tổ tiên, tôi sẽ sử dụng việc sử dụng các Bộ chọn /deep/ (có bí danh >>> như Günter được sử dụng trong câu trả lời của anh) trong thành phần gốc, sẽ buộc phong cách xuống qua tất cả các thành phần của tổ tiên. Lưu ý rằng điều này sẽ áp dụng kiểu cho tất cả trẻ em xem cũng như trẻ em nội dung.

@Component({ 
    selector: 'component-a', 
    styles: [`/deep/ p { color: red; }`] 
}) 

Plunker

Xem thêm các Special Selectors phần trong hướng dẫn dev Component Styles.