Я использую Angular2 с Semantic UI в качестве библиотеки CSS. У меня есть этот кусок кода:

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

карты оформлены красиво с промежутком между ними и тому подобное. как это:обратитесь к разделу карт в ссылке

поскольку карты представляют собой какую-то точку зрения, я подумал сделать из нее компонент, поэтому теперь код выглядит так:

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

но теперь стиль нарушен, между ними больше нет места.

Есть ли хороший способ исправить это?

первое, что я подумал сделать это:

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>

но это неудовлетворительно, так как я хочу иметь возможность передать объект, и компонент автоматически установит[href]=obj.link.

в AngularJS 1.0 былreplace: true собственность, которая делает то, что мне нужно,есть ли подобное в Angular2?