角2 +セマンティックUI、コンポーネントカプセル化がスタイルを破る

Question

私はcssライブラリとしてセマンティックUIを使ってAngular2を使用しています。私はこのコードを持っています：

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

カードは、との間のスペースでうまく描画されます。このような ：

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

が、今のスタイルが壊れている、いいえがあります：refer to cards section in the link

カードは、今のコードがあり、私はそれからコンポーネントを作ると考えるビューのいくつかの種類を表すため、それらの間のスペースはもうありません。

これを修正する良い方法はありますか？

---

私がやって考える最初の事はこれです：

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ないreplace: trueプロパティがあった、はAngular2で同じようなことがありますか？

Answer 1

Angular2にはreplace=trueがありません。これは悪い解決策とみなされ、Angular 1.xでも廃止されています。
関連項目Why is replace deprecated in AngularJS?

コンポーネントまたはディレクティブのタグセレクタの代わりにアトリビュートセレクタを使用します。

だけでは、また、カプセル化戦略http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.htmlを調整するかもしれないが、私はデフォルトemulatedがで問題ないはずだと思う

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

に

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

を変更し、

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

のようにそれを使用しますあなたの場合。

Answer 2

がGünterZöchbauerが@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にバインドされていると私は一枚で休むことができる方法。