コンポーネントを再帰的に使用する

Question

コンポーネントを使用しようとしています。このコンポーネントのテンプレートは、その中の同じコンポーネントの別のインスタンスを参照しています。それは次のようになりJSONとして表現

myBox = new Box('top box'); 
myBox.contents.add(new Item('level 2 - 1')); 
myBox.contents.add(new Item('level 2 - 2')); 
Box myBox2 = new Box('inner box'); 
myBox2.contents.add(new Item('level 3 - 1')); 
myBox2.contents.add(new Item('level 3 - 2')); 
myBox.contents.add(myBox2); 

：

を

class Item { 
    String name; 
    Item(this.name); 
} 

class Box extends Item { 
    Box(String name) : super(name); 
    List<Item> contents = []; 
} 

上記に基づき、データは、このように作成されます。

モデルは、このようなものです

{ "name": "top box", "contents": [ {"name": "level 2 - 1"}, {"name": "level 2 - 2"}, {"name": "inner box", "contents": [ {"name": "level 3 - 1"}, {"name": "level 3 - 2"} ] } ] } 

成分ダーツ（box_component.dart）：

@Component(
    selector: 'box-component', 
    templateUrl: 'box_component.html', 
    directives: const[CORE_DIRECTIVES] 
) 
class BoxComponent implements OnInit { 
    @Input() 
    Box box; 
    List contents =[]; 

ngOnInit() { 
    contents = box.contents; 
} 
isBox(Item itm) => (itm is Box); 
} 

コンポーネントテンプレート（box_component.html）：ボックスコンポーネントの別のインスタンスが内にネストされていることを

<div *ngIf="box != null" style="font-weight: bold">{{box.name}}</div> 
<div *ngFor="let item of contents"> 
    {{item.name}} 
    <div *ngIf="isBox(item)"> 
    This is a box 
    <box-component [box]="item"></box-component> 
    </div> 
    <div *ngIf="!isBox(item)"> 
    This is an item 
    </div> 
</div> 

注トップレベルのボックスコンポーネント しかし、レンダリング時には、トップレベルボックスの内容のみがレンダリングされ、ボックス内に入れ子になっているボックスには含まれません。

それは次のようになります

トップボックス
レベル2 - これはアイテム
内箱
これは、ある2
- 1
これはアイテム
レベル2でありますボックス
これは商品です

再帰を達成する方法はありますかアイディアネストされたレンダリング？

Answer 1

テンプレートが使用するディレクティブは、ディレクティブリストで宣言する必要があります。再帰的にそれ自身を使用したい場合は、これ自体が含まれます。したがって、あなたの場合、@Component注釈は、同じ要素の `* ngFor`と` * ngIf`は無効です：

@Component(
    selector: 'box-component', 
    templateUrl: 'box_component.html', 
    directives: const[CORE_DIRECTIVES, BoxComponent] 
) 
class BoxComponent