web-dev-qa-db-ja.com

angular 4のHTMLからホストコンポーネントタグを削除します。

コンポーネントであるテーブル行を表示したいテーブルがあります。また、そのコンポーネントにデータを渡したいです。

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

my-componentでは、HTMLはいくつかの<td></td>であり、データはdata1およびdata2からレンダリングされます。

しかし、それをレンダリングした後、<my-component></my-component>が原因で私のCSSが壊れ、すべてのmy-component HTML（テーブル全体の行）が1列目に表示されます。

上記の結果：

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

私は以下を試しました：

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

しかし、これはエラーCan't bind to 'data1' since it isn't a known property of 'tr'になります。

また、HTMLをレンダリングしたいため、@Directiveを使用できません。

<my-component></my-component>タグなしで<my-component></my-component>のテンプレートをレンダリングするにはどうすればよいですか？

他の回答はangularの以前のバージョンのものです。私はAngular 4.3.4を使用しています。

助けていただければ幸いです。

htmlcssangularangular-directiveangular-template
18
AjinkyaBhagwat

以下のようにセレクターにtrも含める必要があります。

@Component({
 selector: 'tr[my-component]',
 template: `
   <td>{{data1.prop1}}</td>
   <td>{{data1.prop2}}</td>
   <td>{{data2.prop1}}</td>
 `
})
export class MyComponent {
  @Input() data1;
  @Input() data2;
}

これをチェックしてください Plunker !!

お役に立てれば！！

13
Madhu Ranjan