角度2のコンポーネントを繰り返さずに再帰的にテンプレートを繰り返します。

Question

私は角度2で始まりましたが、面白いと感じました。しかし、過去数日から何かにぶつかり、私を助けてくれる人が必要です。

シナリオ：

は階層構造で、チェックボックスで選択ボックスを構築しています。

A 
|---A1 
|---A2 
    |---A2.1 
    |---A2.2 
      |..... 
|..... 

したがって、Webサービスはこのデータ構造をjson形式で返します。

@Component({ 
    selector: 'tree-view', 
    template: `<ul> 
    <li *ngFor="let items of data"> 
     <a href="javascript:void(0);" 
     (click)="toggleMultiSelect($event,[items])"> 
     <input type="checkbox" name="{{items.name}}" 
     [checked]="getChecked(items.id)" 
     id="{{items.id}}"> 
     <label [attr.for]="items.id" class="custom-unchecked">{{items.name}}</label> 
     </a> 
     <tree-view 
     *ngIf="items.children && items.children.size > 0" 
     (isSelected)="resultChild($event)" 
     [data]="items.children"></tree-view> 
    </li> 
    </ul>`, 
    directives: [ MultiHierarchyTreeViewComponent ] 
}) 

それでは、私がやっていることは、データがそれを子供を持っている場合、私はチェックしています：ので、私はそれが私が行っていることである現在

を持つことになり、階層の子どもの数を認識しませんセレクタをもう一度繰り返します。これは、選択ボックスの階層構造をもたらします。

しかし、問題は、私は現在、それをテンプレートと一緒にクラスを繰り返しているので、これはすべて、親の選択を解除し、すべての選択をしている、唯一のテンプレートを繰り返す必要がある - 困難な児童の選択操作を。

私は<template>が私の問題を解決すると思っていましたが、

私はこの問題を解決するために過去2日間から私の頭を壊していますが、毎回否定的な反応を得ています。

Answer 1

私は最近、同じようなことに対処し、私のために最善の方法は、個別にツリーデータ構造およびコンポーネントを格納しました。

ツリーデータ構造は単なるネストされたオブジェクトです：

export class TextTreeNode implements TreeNodeInterface { 
    private parentNode: TreeNodeInterface; 
    private childrenNodes: TreeNodeInterface[] = []; 

    constructor(text: string, options: TreeNodeOptions|Object, children: TreeNodeInterface|TreeNodeInterface[] = []) { 
     // ... 
    } 

    get parent() { 
     return this.parentNode; 
    } 

    get children() { 
     return this.childrenNodes; 
    } 
    // ... 
} 

次にレンダリングが別々のコンポーネントである：

export interface TreeNodeInterface { 
    parent: TreeNodeInterface; 
    children: TreeNodeInterface[]; 
} 

基本クラス、このインタフェースを実装し、この（complete code is available here）のように見えます。

*ngIfでサブツリーを表示/非表示できるため、非常に大きなツリーでもDOMを比較的簡単に保つことができます（通常、ツリー全体のうちのほんの一部しか表示されないと仮定します）。これにより、アプリケーションのさまざまな部分で同じツリーを簡単に再利用できるようになります。

は、私はあなたがQueryListと同じことを行うことができます確信しているが、私は私のユースケースのために別々の作品より良いツリー構造を維持する、言ったように。

@Component({ 
    selector: 'ng2-treeview', 
    directives: [ TreeViewComponent ], 
    template: ` 
     ... 
     <ng2-treeview *ngFor="let child of node.children" [node]="child"></ng2-treeview> 
    ` 
}) 
export class TreeViewComponent implements TreeViewInterface, AfterViewInit 
{ 
    @Input() node: TreeNodeInterface;   
    // ... 
} 

使い方はその後、非常に簡単です：

@Component({ 
    selector: 'demo', 
    directives: [TreeViewComponent], 
    template: ` 
     <ng2-treeview [node]="textTreeView"></ms-treeview> 
    ` 
}) 
export class DemoComponent { 
    textTreeView = new TextTreeNode('Root node', null, [ 
     new TextTreeNode('Child node #1'), 
     new TextTreeNode('Child node #2'), 
     new TextTreeNode('Child node #3'), 
     new TextTreeNode('Child node #4', null, [ 
      new TextTreeNode('Hello'), 
      new TextTreeNode('Ahoy'), 
      new TextTreeNode('Hola'), 
     ]), 
     new TextTreeNode('Child node #5'), 
    ]); 
} 

私はng2-treeviewでの完全なソースコードを持っている、しかし私は、ドキュメントを完了するために、最近の時間を持っていなかったし、今はそれが古いAngular2 RCのために作られています。 1。

編集：私は、各ツリーノード上の例のマウスクリックのために扱うようにしたい場合は、TreeViewComponentに注入のサービスを作成することができます。

import {EventEmitter, Injectable} from '@angular/core'; 

@Injectable() 
export class TreeNodeService { 
    click: EventEmitter<Object> = new EventEmitter(); 
} 

その後TreeViewComponent上の各(click)がサービスに引き渡されます。

nodeClick(event) { 
    this.treeNodeService.click.emit(this.node.id); 
} 

そして最後に、DemoComponentはコンストラクタで依存関係としてTreeNodeServiceを受け取り、clickイベント・エミッターを購読することができます。 DemoComponentもTreeNodeServiceのプロバイダになることができるので、同時に複数の独立したインスタンスTreeNodeServiceが存在する可能性があります。