[解決済み] Angular2のテーブル行をコンポーネント化

質問

私はangular2 2.0.0-beta.0を試しているところです。

私はテーブルを持っていて、行の内容はこのようにangular2によって生成されます。

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

今、これは動作し、私はコンポーネント＆quot;テーブルライン＆quot;にコンテンツをカプセル化したいと思います。

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

そして、コンポーネントでは、テンプレートに <tr><td> の内容があります。

しかし、今はテーブルがもう機能しません。つまり、コンテンツが列で表示されなくなったということです。 ブラウザで、インスペクタを見ると、DOM要素はこのようになっています。

    <table>
        <table-line ...>
            <tbody>
                <tr> ....

どうすればうまくいくのでしょうか？

どのように解決するのですか？

既存のテーブル要素をセレクタとして使用する

table 要素では <table-line> 要素を子として許可しておらず、ブラウザはそれらを見つけると削除します。これをコンポーネントで囲むと、許容される <tr> タグを使用することができます。ただ "tr" をセレクタとして使用します。

を使って <template>

<template> も同様に許可されるべきですが、まだすべてのブラウザで動作しているわけではありません。Angular2 は実際には決して <template> 要素を DOM に追加することはなく、内部で処理するだけです。したがって、これは Angular2 のすべてのブラウザで同様に使用することができます。

属性セレクタ

もう一つの方法は、属性セレクタを使用することです。

@Component({
  selector: '[my-tr]',
  ...
})

のように使用します。

<tr my-tr>