Góc 2 kiểu không áp dụng cho Thành phần con

Question

Tôi đang cố gắng áp dụng kiểu cho thẻ thành phần con, nhưng tôi không thể làm điều đó.

Tôi có thành phần con với thẻ liên kết.

Mặc dù tôi có kiểu dáng cho thẻ neo trong thành phần chính, nhưng nó không áp dụng. Giải pháp cho nó là gì?

đang làm việc: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

<a href="https://www.google.com">Google</a> 

Trong thành phần cha mẹ tôi đang sử dụng các thành phần con và áp dụng phong cách cho thành phần trẻ này.

mã HTML:

<div class="container"> 
    <div class="test"> 
    <testapp></testapp> 
    </div> 
</div> 

mã CSS:

.container{ 
    font-family:sans-serif; 
    font-size:18px; 
    border: 1px solid black; 
} 
.test{ 
    width:50%; 
    background-color:#f0f5f5; 
} 

.container:hover .test{ 
    background-color:#e6ffe6; 
} 
.container:hover .test:hover{ 
    background-color:#ffffe6; 
} 
.container .test a { 
    color: red ; 
} 
.container .test a:hover { 
    color:green; 
} 

Answer 1

Đó là vì theo mặc định các thành phần có cái nhìn đóng gói (shadow dom). Để vô hiệu hóa hành vi này, bạn có thể tận dụng các thuộc tính encapsulation, như mô tả dưới đây:

import {Component, ViewEncapsulation} from '@angular/core'; 
import {TestApp} from 'testapp.component.ts'; 
@Component({ 
    selector:'test-component', 
    styleUrls: ['test.component.css'], 
    templateUrl: './test.component.html', 
    directives:[TestApp], 
    encapsulation: ViewEncapsulation.None // <------ 
}) 
export class TestComponent{ 

} 

Xem plunkr này: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

Answer 2

Khi sử dụng thuộc tính styleUrls, kiểu là địa phương đối với một thành phần, không phải cho các thành phần của nó. Vì vậy, tôi đã thực hiện hai thay đổi: 1) Đã di chuyển styleUrls thành thành phần testapp. 2) Đã di chuyển div đến thành phần testapp.

import {Component} from '@angular/core'; 
@Component({ 
selector:'testapp', 
styleUrls: ['./test.component.css'], 
template: ` 
<div class="test"> 
    <a href="https://www.google.com">Google</a> 
</div> 

` 

}) 
export class TestApp{ 

} 

Answer 3

EDITED: Điều này cần giải quyết:

Trong css của lớp con ghi mã dưới đây

:host.parentclass childclass{ 

} 

Các ParentClass là cha mẹ trực tiếp của con. lớp con là lớp được áp dụng cho thành phần con.