大佬教程收集整理的这篇文章主要介绍了css – Angular 2 Semantic UI,组件封装打破了风格，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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中有类似的东西吗？
在组件或指令中使用属性选择器而不是标签选择器.
只是改变
@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,但我认为默认模拟在您的情况下应该没问题.
以上是大佬教程为你收集整理的css – Angular 2 Semantic UI,组件封装打破了风格全部内容，希望文章能够帮你解决css – Angular 2 Semantic UI,组件封装打破了风格所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。