0

我可以使用它们的 ID 突出显示静态菜单项（左侧），但无法突出显示我的菜单列表中动态生成的部分（因素列表）。我正在使用 ViewChild 来获取静态菜单项，并使用 ViewChildren 来获取所有与因素相关的菜单名称。

单击并滚动到锚标记也可以工作，只是坚持这一点。

我无法获得它的偏移值

.html


    <div class="col-md-2 col-sm-3 px-0 darkBlueBg leftPanel">
      <ul>               
        <li class="active" [ngClass]="{'active': currentActive === 'propSummary'}" [class.active]="(activeFragment | async)==='prop-summary' || currentActive === 'cob'"> 
           <a routerLink = "./" fragment="prop-summary">Proposal Summary</a>
        </li>
        <li *ngFor="let val of factorList; let i=index">
          <a routerLink = "./" 
              [ngClass]="{'active': currentActive === 'factor'+i}" 
              [class.active]="(activeFragment | async)=='factor'+i" 
              fragment="factor{{i}}">
                  {{val?.factorName}}
         </a>
        </li>               
        <li [ngClass]="{'active': currentActive === 'comments'}" 
          [class.active]="(activeFragment | async)==='comments'"> 
        <a routerLink = "./" fragment="comments">Comments</a>
       </li>                            
      </ul>
     </div>

.ts

  

    activeFragment = this.route.fragment.pipe();``` // used this to go to section on click
    
    // --------------------HIGHLIGHT ACTIVE SECTION'S LABEL CODE ------------------------
     ``` public currentActive; 
      public propSummaryOffset: Number = null; 
      public commentsOffset: Number = null;
    
      @ViewChild('propSummary', { static: false }) propSummaryElement: ElementRef;
      @ViewChild('comments', { static: false }) commentsElement: ElementRef;
    
    //**I GET ALL THE FACTOR RELATED IDS HERE**
      @ViewChildren('factor') factors: QueryList<any>; 
      
      ngAfterViewInit() {  
        this.propSummaryOffset = this.propSummaryElement.nativeElement.offsetTop;  
        this.commentsOffset = this.commentsElement.nativeElement.offsetTop;     
      }
    
      @HostListener('window:scroll', ['$event']);
      checkOffsetTop() {
        
        if (window.pageYOffset >= this.propSummaryOffset && window.pageYOffset < this.scribeNotesOffset) {
          this.currentActive = 'propSummary';
        }    
        else if (window.pageYOffset > this.commentsOffset) {
    
    //I TRIED BELOW, FOR AND FOREACH, BUT I AM NOT ABLE TO FIGURE OUT, ON WHICH CONDITION TO SET THE currentActive VARIABLE to corresponding FACTOR NAME*
          // for(let i=0; i<=3 ;i++){         
          //   this.currentActive = 'factor'+i;
          // }
       
          let i=0;
          this.factors.forEach( item => {
            
            if(item == 'section#factor'+i){
              this.currentActive = 'factor'+i;
            }
            console.log("inside find", item); 
            i++;  
            }
          );
      
        }    
        else if (window.pageYOffset >= this.commentsOffset) {
          this.currentActive = 'comments';
        }
        
      }

有什么建议么？

4

0 回答 0