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 {}