Angular 2 + Semantic UI,组件封装打破风格
Posted
技术标签:
【中文标题】Angular 2 + Semantic UI,组件封装打破风格【英文标题】:Angular 2 + Semantic UI , component encapsulation breaks style 【发布时间】:2016-04-14 21:44:16 【问题描述】:我正在使用带有语义 UI 的 Angular2 作为 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 中有一个 replace: true
属性可以满足我的需要,Angular2 中有类似的东西吗?
【问题讨论】:
Remove the host html element selectors created by angular component的可能重复 【参考方案1】:Angular2 中没有replace=true
。它被认为是一个糟糕的解决方案,并且在 Angular 1.x 中也被弃用了。
另见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,但我认为默认的emulated
在您的情况下应该没问题。
【讨论】:
如果存在,我希望有更好的解决方案【参考方案2】:使用@GünterZöchbauer Answer 和@HostBinding('href')
解决了这个问题
所以现在的代码是:
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>
这样href会自动绑定到obj.link
,我就可以休息了。
【讨论】:
以上是关于Angular 2 + Semantic UI,组件封装打破风格的主要内容,如果未能解决你的问题,请参考以下文章
Angular JS & Semantic-UI 复选框需要双击