Angular Materialグリッドリストコンポーネントの `list`と` item`を別々のコンポーネントに分割しましたか？

Question

Angular2 Material grid list componentを使用しており、別のコンポーネントにlistとitemを分割したいとします。ここで

は私のlistです：

@Component({ 
    selector: 'app-item', 
    template: ` 
    <md-grid-tile [colspan]="6"> 
     First 
    </md-grid-tile> 
    <md-grid-tile [colspan]="6"> 
     Second 
    </md-grid-tile> 
    ` 
}) 
export class ItemComponent implements OnInit { } 

問題は子供itemコンポーネントはラッパー<app-item>カスタム（無効）内の実際のDOMにレンダリングされることを示します。ここでは

@Component({ 
    selector: 'app-list', 
    template: ` 
    <md-grid-list cols="12"> 
     <app-item *ngFor="let item of items"></app-item> 
    </md-grid-list> 
    ` 
}) 
export class ListComponent { 
    items: Array<number> = [1, 2]; // dummy data 
} 

は私itemコンポーネントですDOM要素。 、

<md-grid-list cols="12"> 
    <!-- Item 1 --> 
    <app-item> <!-- same issue if I replace this with `div` or `span` --> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    </app-item> 

    <!-- Item 2 --> 
    <app-item> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    </app-item> 
</md-grid-list> 

私はng-content、DynamicComponentLoader見てきました、ViewContainerRef：そしてAngular2素材grid list componentは、以下の構造を期待するのでスタイルが壊れている：

<md-grid-list cols="12"> 
    <!-- Item 1 --> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 

    <!-- Item 2 --> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
    <md-grid-tile [colspan]="6"></md-grid-tile> 
</md-grid-list> 

を...しかし、実際のDOM構造でありますしかし、私が見る限り、彼らはこれに対する解決策を提供していないようです。

私はresponse hereを読んでいますが、属性セレクタは私にとってもうまくいきません。ラッピングコンポーネントが<app-item>または<div>または<span>であるかどうかは関係ありません。スタイリングは常に破損します。

親ラッパーなしで子コンポーネントをレンダリングできるかどうかは誰にも分かりますか？私のユースケースのために提案できる回避策がありますか？

Answer 1

@sergeras、the solution you proposedのdoesn仕事はありません。

属性セレクタと<ng-container>を使用したアプローチがエラーを引き起こしており、Angely Material 2公式リポジトリのI raised an issueが非常に驚いていました。

ジェレミーElbourn、角度資料2にトップ貢献の一つは、an explanationを提供：

... you can view the grid-list as a single UI component with a specific API. Placing the grid tiles inside of another component hides them completely from the grid list since each component is effectively a black box.

したがって、私の質問への答えは次のとおりです。それは異なる角度2に分離するために、現在ことはできませんコンポーネント、Angular2 Materialのリストおよびリスト項目grid list component。回避策はありません。

Answer 2

あなたは、属性セレクタを使用してng-container、このようなあなたの親コンポーネントを作ることになることができます。

@Component({ 
    selector: 'app-list', 
    template: ` 
    <md-grid-list cols="12"> 
     <ng-container appItem *ngFor="let item of items"></ng-container> 
    </md-grid-list> 
    ` 
}) 

そして、子コンポーネントは次のようになります：

@Component({ 
    selector: '[appItem]', 
    template: ` 
    <md-grid-tile [colspan]="6"> 
     First 
    </md-grid-tile> 
    <md-grid-tile [colspan]="6"> 
     Second 
    </md-grid-tile> 
    ` 
}) 
export class VehiclesItemComponent implements OnInit { }