Angular 2 + Semantic UI,组件封装打破了风格

Question

我正在使用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中有类似的东西吗？

Answer 1

replace=trueAngular2中没有.它被认为是一个糟糕的解决方案,也在Angular 1.x中被弃用.
另请参阅为什么在AngularJS中不推荐使用替换？

在组件或指令中使用属性选择器而不是标签选择器.

只是改变

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

至

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

并使用它

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

您也可以调整封装策略http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html但我认为默认情况下emulated应该没问题.