Css 角度2+；语义用户界面，组件封装打破风格

我正在使用Angular2和语义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>

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>



但是现在这种风格被打破了，他们之间再也没有空间了

有什么好办法解决这个问题吗？


我想做的第一件事是：

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>

my card组件旧模板：

但这并不令人满意，因为我希望能够传入一个对象，并且组件会自动设置
[href]=obj.link


在AngularJS 1.0中有一个
replace:true
属性，它非常符合我的需要，Angular2中有类似的东西吗？Angular2中没有
replace=true
。它被认为是一个糟糕的解决方案，在Angular 1.x中也不推荐使用。

另见

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

换衣服

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

到

像这样使用它

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

但是我认为默认的
模拟的
应该适合您。
使用@GünterZöchbauer Answer和
@HostBinding（'href'）解决了这个问题。
现在代码是：

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

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>

模板：
---------
[一些垃圾]
组成部分：
----------
@组成部分({
选择器：'a[my card component].ui.card'，
templateUrl:'urlOfSomeJunk.html'，
指令：[]
})
导出类ProblemCardComponent{
@输入（）
对象：肌体；
@HostBinding（'attr.href'）获取链接{返回this.obj.link；}
}
实例化：
--------------

这样，href就会自动绑定到
obj.link
，我就可以完整地休息了。
如果存在一个可能重复的