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

问题描述

我使用带有语义 UI 的 Angular2 作为 css 库.我有这段代码:

<a class="ui card">... </a><a class="ui card">... </a><a class="ui card">... </a>

卡片渲染得很好，中间有一个空格.像这样:参考链接中的卡片部分

由于卡片代表某种视图，我想用它制作一个组件，所以现在代码是:

<my-card-component></my-card-component><my-card-component></my-card-component><my-card-component></my-card-component>

但现在风格坏了，它们之间没有空间了.

有什么好的方法可以解决这个问题吗?

我想到的第一件事是:

my-card-component 旧模板:<a class="ui card">[一些垃圾]</a>|||VVVmy-card-component 新模板:[一些垃圾]并实例化如下:<my-card-component class="ui card"></my-card-component>或喜欢:<a href="?"我的卡片组件></a>

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

在 AngularJS 1.0 中有一个 replace: true 属性，它完全符合我的需要，Angular2 中是否有类似的东西?

解决方案

Angular2 中没有 replace=true.它被认为是一个糟糕的解决方案，并且在 Angular 1.x 中也不推荐使用.
另请参阅为什么在 AngularJS 中不推荐使用替换?

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

只要改变

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

到

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

并像使用它一样

... </a>

你也可以调整封装策略http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html 但我认为默认的 emulated 应该是你的情况很好.

I'm using Angular2 with Semantic UI as a css library. I have this piece of code:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

the cards are rendered nicely with a space between and such.like this: refer to cards section in the link

since the cards represent some kind of view I thought of making a component out of it, so now the code is:

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

but now the style is broken, there is no space between them anymore.

Is there any nice way of fixing this ?

---

the first thing I thought of doing is this:

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>

but this is not satisfactory since I want to be able to pass in an object and the component would automatically set the [href]=obj.link.

---

in AngularJS 1.0 there was a replace: true property which does excatly what i need, is there a similar thing in Angular2 ?

解决方案

There is no replace=true in Angular2. It is considered a bad solution and deprecated in Angular 1.x as well.
See also Why is replace deprecated in AngularJS?

Use an attribute-selector instead of a tag-selector in your component or directive.

Just change

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

to

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

and use it like

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

You might also adjust the encapsulation strategy http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html but I think the default emulated should be fine in your case.

这篇关于Angular 2 + Semantic UI，组件封装打破风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！