Angular 2 - Anwenden bedingter Stil auf das untergeordnete HTML-Element einer Direktive

Question

Ich versuche, eine Klasse auf ein HTML-Element basierend auf einem Klickereignis anzuwenden. Dies funktioniert gut, wenn die Klasseneigenschaft für das Kind Komponente Wähler aus der Vorlage übergeordneten Komponente einstellen, wie durch den folgenden Ausschnitt aus der übergeordneten Komponente gesehen:

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

Dies wird in geeignete Weise den Stil festgelegt, wenn das Element angeklickt wird. Allerdings habe ich ein inneres HTML-Element der Klasse in der untergeordneten Komponente auf der gleiche Art von Klickereignis basierend festlegen möge, ist hier das gewünschte Ziel für den Stil für das Kind Komponente:

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

Gibt es eine Möglichkeit, dies zu tun das wird leicht unterstützt? Oder ist dies eine schlechte Übung und ich sollte meine Komponenten so konstruieren, dass diese bedingte Styling-Situation vermieden wird?

Voll Code:

@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

fand ich einen besseren Weg, um diese eine gute Nutzung von Angular2 Funktionen zu lösen.

Insbesondere statt Tricks zu tun mit: Host und CSS-Funktionalität können Sie in einer Variablen für das Kind Komponente passieren nur durch Änderung:

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

in dem Element der Änderung es

Kind-Klasse festgelegt werden

[isBordered]='isSelected(item)' 

Dann auf dem div Sie möchten die grenzte Klasse in der Vorlage des Kindes Komponente anzuwenden nur hinzufügen:

[ngClass]='{bordered: isBordered}' 

Hier ist der vollständige Code mit der Änderung:

@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

hinzufügen Stil an den 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 {}