Angular 2 + Semantic UI，組件封裝打破了風格

Question

我正在使用Angular2和Semantic UI作為css庫。 我有這段代碼：

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

但現在風格破碎了，它們之間再也沒有空間了。

有沒有什么好辦法解決這個問題？

---

我想做的第一件事是：

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中有類似的東西嗎？

Answer 1

Angular2中沒有replace=true 。 它被認為是一個糟糕的解決方案，也在Angular 1.x中被棄用。
另請參閱為什么在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應該沒問題。

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 ，我可以休息。