Angular 2 + Semantic UI, инкапсуляция компонентов нарушает стиль

Я использую 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?


angular css semantic-ui angular2-directives angular2-template
person user47376    schedule 10.01.2016    source источник
comment
Возможный дубликат Удалить селекторы HTML-элементов хоста, созданные angular компонент   -  person Günter Zöchbauer    schedule 29.03.2016

Ответы (2)


arrow_upward
7
arrow_downward

В Angular2 нет replace=true. Это считается плохим решением и устарело в Angular 1.x.
См. также Почему replace устарел в AngularJS?

Используйте селектор атрибутов вместо селектора тегов в вашем компоненте или директиве.

Просто измените

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

to 

@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 по умолчанию.

person Günter Zöchbauer    schedule 10.01.2016
comment
Я бы предпочел лучшее решение, если оно существует - person user47376; 10.01.2016

arrow_upward
1
arrow_downward

Решил это с помощью ответа @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, и я могу спокойно отдыхать.

person user47376    schedule 11.01.2016