角度2：再帰成分

Question

ため@ViewChildren私はDESタグを表示再帰成分を有する

まず、ある親コンポーネント - HTML

<div class=" suggestions" style="display : inline-block;" tabindex=-1 #autocompleteDiv> 
    <span style="width: auto;cursor: pointer;position: absolue"> 
     <div *ngIf="hideInputField" style="border: 1px solid #9e9898"> 
      {{query}} 
      <a style="color: #0012ff;" (click)="unselectData()">x </a> 
     </div> 
     <div *ngIf="!hideInputField"> 
     <input type="text" [(ngModel)]="query" (keyup)="handleKeyPress($event)" (keypress)="handleEnterPress($event)" 
       style="padding: 4px;" (click)="displayDropdown();" #inputquery (selectValueEvent)="select($event)"> 
     <div #suggestion *ngIf="divMustBeShow===true" tabindex="-1"> 

      <div #recursivediv class="liclass" > 
       <recursive-tree-view [treeNodeDisplay]="listToBuild" 
        [selectedItem]="selectedItem" 
        (selectValueEvent)="select($event)" #recursive></recursive-tree-view> 
      </div> 
     </div> 
     </div> 
    </span> 
</div> 

親コード（一部）：

成分再帰的ツリービューの

displayDropdown() { 
    if (this.divMustBeShow) { 
     if ((this.query && this.query.length < 1) || !this.query) { 
      this.divMustBeShow = false; 
     } 
    } else { 
     this.divMustBeShow = true; 

    } 
} 

handleEnterPress(key: KeyboardEvent) { 

    if (key.keyCode === 13 || key.keyCode === 20) { 
     //when press enter (13) or tab (20) 
     this.query = this.recursive.selecItemWithEnterPress(); 
    } 
} 


handleKeyPress(key: KeyboardEvent) { 
    if (key.key === "ArrowDown") { 
     // if the pressed key is down arrow 
     this.recursive.setDownListFocus() 
    } else if (key.key === "ArrowUp") { 
     // if the pressed key is up arrow 
     this.recursive.setUpListFocus(); 
    } else if (key.keyCode === 13 || key.keyCode === 20) { 
     //when press enter (13) or tab (20) 
     this.query = this.recursive.selecItemWithEnterPress(); 
    } else if ((key.keyCode > 64 && key.keyCode < 91) // key a -> z 
     || key.keyCode === 32 // space 
     || key.keyCode === 8 // backspace 
     || key.keyCode === 46 // delete 
     || (key.keyCode > 47 && key.keyCode < 57) // 1-> 9 
     || (key.keyCode > 95 && key.keyCode < 106))// 1-9 (numpad) 
     if (this.query && this.query.length > 1) { 
      this.divMustBeShow = true; 
      this.listToBuild = this.filterFunction(this.query, this.originalMap, this.userLanguage); 
     } 
     else { 
      this.divMustBeShow = true; 
      this.listToBuild = this.filterFunction("", this.originalMap, this.userLanguage); 
     } 
} 

HTML：

成分中

、iは（#ITEMのかくしてリスト）全てのリストが欲しい

@ViewChildren(forwardRef(() => "item")) 
itemsList: QueryList<ElementRef>; 
setDownListFocus() { 
    if (this.lineCounter < this.itemsList.toArray().length) { 

     if (this.lineCounter > 0) { // one item is already selected 
      //unselected previous element 
      this._renderer.setElementStyle(this.itemsList.toArray()[this.lineCounter - 1].nativeElement, 'font-weight', 'normal'); 

     } 
     this._renderer.setElementStyle(this.itemsList.toArray()[this.lineCounter].nativeElement, 'font-weight', 'bold'); 
     this.lineCounter++; 
    } 
} 

setUpListFocus() { 
    if (this.lineCounter > 0) { 
     this.lineCounter--; 
     this._renderer.setElementStyle(this.itemsList.toArray()[this.lineCounter - 1].nativeElement, 'font-weight', 'bold'); 
     this._renderer.setElementStyle(this.itemsList.toArray()[this.lineCounter].nativeElement, 'font-weight', 'normal'); 
    } 

} 

lineCounterは、表示結果が再帰成分のngOnInit 1に

に設定されています。ユーザPR場合

..... (input text) 
    node 1 
    result1 => the first element must be in bold 
    result2 
    node2 
    result3 
    result4 
    result5 

ユーザプレスarrowDownキー、最初の要素（従って結果1）は通常のフォントと（従って結果2）第二持っている必要があり、太字 次にでなければなりませんユーザがupDownキーを押した場合、3番目の要素（result3）は通常でなければならず、2番目の要素は次のようにしなければなりません（ ）。大胆に。

要素ノードは太字

Answer 1

@ViewChildren()にのみ直接の子のために働くことはできません。

回避策は、treeNodeが作成時に登録され、ngOnDestroyで削除される共有サービスです。

サービスはtreeNodeに登録できません。それ以外の場合は、それぞれtreeNodeが独自のインスタンスを取得します。これは、ルートノードまたはルートモジュールの親でなければなりません。