Angular 2 - 將條件樣式應用於指令的子元素HTML元素

Question

我試圖將一個類應用於基於單擊事件的HTML元素。

[class.bordered]='isSelected(item)' 

這將設置適當的風格被點擊項目時：設置爲從父組件模板子組件的選擇類屬性時所看到從父組件下面的片段也能正常工作。不過，我想設置一個內部HTML元素的類基於相同類型的單擊事件的子組件，這裏是爲風格的子組件所需的目標：

template: ` 
    <div class="This is where I really want to apply the style"> 
    {{ item.val }} 
    </div> 
` 

有沒有辦法做到這一點這很容易支持？或者這被認爲是一種不好的做法，我應該設計我的組件來避免這種有條件的樣式情況？

全碼：

@Component({ 
    selector: 'parent-component', 
    directives: [ChildComponent], 
    template: ` 
    <child-component 
     *ngFor='#item of items' 
     [item]='item' 
     (click)='clicked(item)' 
     [class.bordered]='isSelected(item)'> 
    </child-component> 
    ` 
}) 
export class ParentComponent { 
    items: Item[]; 
    currentItem: item; 

    constructor(private i: ItemService) { 
    this.items = i.items; 
    } 

    clicked(item: Item): void { 
    this.currentItem = item; 
    } 

    isSelected(item: Items): boolean { 
    if (!item || !this.currentItem) { 
     return false; 
    } 
    return item.val === this.currentItem.val; 
    } 
} 


@Component({ 
    selector: 'child-component', 
    inputs: ['item'], 
    template: ` 
    <div class="This is where I really want to apply the style"> 
     {{ item.val }} 
    </div> 
    ` 
}) 
export class ChildComponent {} 

Answer 1

我發現了一個更好的辦法來解決這個善用Angular2功能。的

具體，而不是用在做掛羊頭賣狗肉：主機和CSS功能，您可以只傳遞一個變量到子組件通過改變：

[class.bordered]='isSelected(item)' 

在子類中改變它的元素被設置爲

[isBordered]='isSelected(item)' 

然後在DIV你想鑲上類適用於子組件的模板，只需添加：

[ngClass]='{bordered: isBordered}' 

以下是完整的代碼的變化：

@Component({ 
    selector: 'parent-component', 
    directives: [ChildComponent], 
    template: ` 
    <child-component 
     *ngFor='#item of items' 
     [item]='item' 
     (click)='clicked(item)' 
     [isBordered]='isSelected(item)'> 
    </child-component> 
    ` 
}) 
export class ParentComponent { 
    items: Item[]; 
    currentItem: item; 

    constructor(private i: ItemService) { 
    this.items = i.items; 
    } 

    clicked(item: Item): void { 
    this.currentItem = item; 
    } 

    isSelected(item: Items): boolean { 
    if (!item || !this.currentItem) { 
     return false; 
    } 
    return item.val === this.currentItem.val; 
    } 
} 


@Component({ 
    selector: 'child-component', 
    inputs: ['item'], 
    template: ` 
    <div [ngClass]='{bordered: isBordered}'> 
     {{ item.val }} 
    </div> 
    ` 
}) 
export class ChildComponent {} 

Answer 2

添加樣式到child-component

@Component({ 
    selector: 'child-component', 
    inputs: ['item'], 
    template: ` 
    <div class="This is where I really want to apply the style"> 
     {{ item.val }} 
    </div> 
    `, 
    styles: [` 
    :host(.bordered) > div { 
    // if this selector doesn't work use instead 
    // child-component.bordered > div { 
     border: 3px solid red; 
    } 
    `], 
}) 
export class ChildComponent {}