9

我正在使用带有语义 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>

卡片渲染得很好，中间有空格。像这样：参考链接中的卡片部分

因为卡片代表了某种视图，我想用它制作一个组件，所以现在代码是：

<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 中是否有类似的东西？

4

2 回答 2

7

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在您的情况下默认应该没问题。

于 2016-01-10T15:19:20.777 回答
1

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

于 2016-01-11T13:08:36.790 回答