Angolare 2 + Interfaccia utente semantica, interruzione incapsulamento componente stile

Question

Sto utilizzando Angular2 con UI semantica come libreria css. Ho questo pezzo di codice:

<div class="ui three stakable cards"> 
    <a class="ui card"> ... </a> 
    <a class="ui card"> ... </a> 
    <a class="ui card"> ... </a> 
</div> 

le carte sono rese piacevolmente con uno spazio tra e così. come questo: refer to cards section in the link

dal momento che le carte rappresentano una sorta di vista ho pensato di fare un componente di fuori di esso, così ora il codice è:

<div class="ui three stakable cards"> 
    <my-card-component></my-card-component> 
    <my-card-component></my-card-component> 
    <my-card-component></my-card-component> 
</div> 

ma ora lo stile è rotto, non c'è spazio tra di loro più.

C'è qualche modo piacevole per risolvere questo?

---

la prima cosa che ho pensato di fare è questo:

my-card-component OLD template: 
<a class="ui card"> 
    [some junk] 
</a> 

      ||| 
      VVV 

my-card-component NEW template: 
[some junk] 

and instantiating like: 
<my-card-component class="ui card"></my-card-component> 
or like: 
<a href="?" my-card-component></a> 

, ma questo non è soddisfacente dato che voglio essere in grado di passare in un oggetto e la componente sarebbe automaticamente impostare il [href]=obj.link.

---

in AngularJS 1.0 c'era una proprietà replace: true che fa excatly quello che mi serve, c'è una cosa simile in Angular2?

Answer 1

Non c'è replace=true in Angular2. È considerato una soluzione non valida e deprecato anche in 1.x angolare.
Vedere anche Why is replace deprecated in AngularJS?

Utilizzare un selettore di attributo invece di un selettore di tag nel componente o nella direttiva.

Basta cambiare

@Directive({ ..., selector: "my-card-component"}) 

a

@Directive({ ..., selector: "a[my-card-component]"}) 

e utilizzarlo come

<a my-card-component class="ui card"> ... </a> 

Si potrebbe anche modificare la strategia di incapsulamento http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html ma penso che il default emulated dovrebbe andare bene in il tuo caso.

Answer 2

risolto utilizzando @ GünterZöchbauer Risposta insieme @HostBinding('href') così ora il codice è:

template: 
--------- 
[some junk] 

component: 
---------- 
@Component({ 
    selector: 'a[my-card-component].ui.card', 
    templateUrl: 'urlOfSomeJunk.html', 
    directives: [] 
}) 
export class ProblemCardComponent { 
    @Input() 
    obj: MyObject; 

    @HostBinding('attr.href') get link { return this.obj.link; } 
} 

instantiating: 
-------------- 
<a class="ui card" my-card-component [obj]="someBindingHere"></a> 

in questo modo il href viene automaticamente associato al obj.link e posso riposare in pezzo.