角2：@ViewChildren遞歸部件

Question

我有顯示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：

<li *ngFor="let treeNode of treeNodeDisplay.getChildren(); let x = index;" style="cursor: default;"> 
    <div *ngIf="!treeNode.canBeClickable()"> 
      {{treeNode.getLabel()}} 
     </div> 
     <div *ngIf="treeNode.canBeClickable()"> 
     <a #item (click)="select(treeNode.getId())" > 
     {{treeNode.getLabel()}} </a> 
     </div> 
    <div *ngIf="nodeHasChildren(treeNode)"> 
     <recursive-tree-view [treeNodeDisplay]="treeNode"      (selectValueEvent)="select($event)" > </recursive-tree-view> 
    </div> 
    </li> 
</ul> 

在組件

，我想有所有的列表（因此#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被設置爲1在遞歸組分ngOnInit

顯示結果是：

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

當用戶按下鍵arrowDown，所述第一元件（因而RESULT1）必須具有字體正常和第二（因此RESULT2）必須以粗體 接着如果用戶PR如果用戶按upDown鍵，第二個元素（result2）必須正常，並且hirs元素（結果3）必須以粗體顯示 ，第三個元素（result3）必須是正常的，第二個元素必須是粗體。

元素節點不能以粗體

Answer 1

@ViewChildren()僅適用於直接孩子。

解決方法是共享服務，其中每個treeNode在創建時自行註冊，並在ngOnDestroy中自行刪除。

該服務無法在treeNode上註冊，否則每個treeNode都會得到自己的實例。它必須是根節點或根模塊的父節點。