Angolare 2 - Applica lo stile condizionale all'elemento HTML secondario di una direttiva

Question

Sto tentando di applicare una classe a un elemento HTML in base a un evento click. Questo funziona bene quando si imposta la proprietà di classe per il selettore del componente figlio dal modello del componente genitore come si vede dal seguente frammento dalla componente principale:

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

Questo sarà opportunamente impostare lo stile di quando tale elemento viene cliccato. Tuttavia, voglio impostare la classe di un elemento HTML interno nel componente figlio sulla base lo stesso tipo di evento click, ecco la destinazione desiderata per lo stile per il componente figlio:

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

C'è un modo per fare questo questo è facilmente supportato? O è considerata una cattiva pratica e dovrei progettare i miei componenti per evitare questo tipo di situazione stilistica condizionale?

codice completo:

@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

ho trovato un modo migliore per risolvere questo facendo buon uso delle caratteristiche Angular2.

In particolare, invece di fare trucchi con: ospite e la funzionalità CSS si può solo passare una variabile per il componente figlio modificando:

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

essere impostato nell'elemento del cambiamento classe figlio a

[isBordered]='isSelected(item)' 

Poi sul div che desideri applicare la classe confina a nel modello del componente figlio basta aggiungere:

[ngClass]='{bordered: isBordered}' 

Ecco il codice completo con il cambiamento:

@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

aggiungere uno stile al 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 {}