角2 +语义UI，组件封装休息风格 [英] Angular 2 + Semantic UI , component encapsulation breaks style

问题描述

我使用Angular2与语义的UI作为一个css库。我有这块code的：

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>

该卡与之间这样一个空间呈现很好。
像这样：指卡一节中的链接

由于卡重新present某种观点我想制作一个组件出它的，所以现在的code是：

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.

有没有解决这个任何好办法？

我觉得做的第一件事情是这样的：

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>

但这不是令人满意的，因为我希望能够在一个对象来传递和组件将自动设置 [HREF = obj.link 。

在AngularJS 1.0有一个更换：真正的属性，它确实excatly我需要什么，有没有在Angular2了类似​​的事情

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

推荐答案

有没有更换= TRUE 在Angular2。它被认为是一个坏的解决方案，并在角1.x中pcated以及德$ P $。结果
另请参见为什么更换AngularJS pcated德$ P $？

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.

只要修改

@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但我觉得默认的模拟应该是你的情况很好。

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.

这篇关于角2 +语义UI，组件封装休息风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！