我使用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>
卡片很好地呈现在它们之间的空间.
像这样：refer to cards section in the link
因为卡片代表某种视图,我想用它来制作一个组件,所以现在的代码是：
<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中有一个替换：true属性,它可以满足我的需求,在Angular2中有类似的东西吗？
解决方法
Angular2中没有replace = true.它被认为是一个糟糕的解决方案,也在Angular 1.x中被弃用.
另见 Why is replace deprecated in AngularJS?
另见 Why is replace deprecated in 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,但我认为默认模拟在您的情况下应该没问题.
