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

replace=trueAngular2にはありません。これは悪い解決策と見なされ、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.htmlemulatedを調整することもできますが、あなたの場合はデフォルトで問題ないと思います。

于 2016-01-10T15:19:20.777 に答える