각도 2 : 재귀 성분

Question

위한 @ViewChildren 난 데스 태그를 표시 재귀 성분을 가지고

첫째가 부모 요소 - 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 :

컴퍼넌트

66,173,569,233,210, 난 lineCounter가

디스플레이 결과가 재귀 성분 ngOnInit 1로 설정

@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'); 
    } 

} 

모든 목록 (#item의 따라서리스트)으로 갖고 싶어 :

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

사용자 프레스 arrowDown 키 (따라서 결과 1)의 첫 번째 요소는 대담 다음에 있어야 (즉 result2) 정상 폰트와 제 있어야 사용자 PR 경우 두 번째 요소 (result2)는 반드시 normal이어야하고 hirs 요소 (결과 3)는 굵게 표시되어야합니다. 다음에 사용자가 upDown 키를 누르면 세 번째 요소 (result3)는 정상이어야하고 두 번째 요소는 굵게.

요소 노드는 굵은

Answer 1

@ViewChildren() 만 직접 아이들을 위해 작동하지 않을 수 있습니다.

해결 방법은 각 treeNode이 자신을 등록 할 때 자신을 등록하고 ngOnDestroy에서 제거하는 공유 서비스입니다.

treeNode에 서비스를 등록 할 수 없습니다. 그렇지 않은 경우 각각 treeNode은 자체 인스턴스를 갖습니다. 루트 노드 또는 루트 모듈의 상위 노드 여야합니다.