滚动到相关部分时，Angular 8 突出显示动态生成的菜单项

问题描述

我可以使用它们的 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';
        }
        
      }

  

有什么建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）