物化CSS嵌套Scrollspy无法正常工作：如何实现？

问题描述

请求的行为：

我正在创建一个带有两个侧面菜单的Angular应用。右侧菜单是主菜单。左侧菜单是一个子菜单，显示主要章节的子章。

由于内容显示在一页/每条路线上，因此我想使用两个Materialize Scrollspys（或者，如果可能的话，在两个菜单中使用一个Scrollspy）来指示用户在页面上的位置。因此，滚动条应在左侧突出显示当前主要章节，在右侧突出显示当前子章节。

当前状态

我试图通过嵌套两个Materialize scrollspys来实现此行为。 Scrollspy已正确初始化，并突出显示了两个菜单。

问题

但是，嵌套的scrollspy无法正常工作。它仅突出显示外部Scrollspy，因此仅突出显示外部菜单。下图显示了主菜单（左侧栏）上缺少的突出显示。

我创建了一个stackblitz应用程序来重现该问题：StackBlitzApp

您可以在我的GitHub存储库中找到更详细的问题说明和完整代码：GitHub Issue & Code

我的Component.ts：

import { Component,OnInit,ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import M from 'materialize-css';

import { Observable,of,Subject } from 'rxjs';
import { delay,filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  elem: HTMLElement;
  instance: any;

  elem2: HTMLElement;
  instance2: any;

  constructor(private elementRef: ElementRef) { }


  ngOnInit() {
    this.elem = this.elementRef.nativeElement.querySelectorAll('.scrollspy');
    this.instance = M.ScrollSpy.init(this.elem);

     this.elem2 = this.elementRef.nativeElement.querySelectorAll('.scrollspy2');
    this.instance2 = M.ScrollSpy.init(this.elem2);
  }
}

我的Component.hmtl：

<ul class="section table-of-contents left">
  <li><a href="#section1">section1</a></li>
  <li><a href="#section2">section2 (Main Menu)</a></li>
  <li><a href="#section3">section3</a></li>
</ul>

<ul class="section table-of-contents right">
  <li><a href="#section21">section21 (Submenu)</a></li>
  <li><a href="#section22">section22 (Submenu)</a></li>
  <li><a href="#section23">section23 (Submenu)</a></li>
</ul>

<div id="section1" class="scrollspy outer-container">
  <h1>Section 1</h1>
</div>

<!--Main chapter -->
<div id="section2" class=" outer-container">
<!-- 
  Add scrollspy as class to section 2 
  if scrollspy added in outer-container,inner menu not working
  
  if scrollspy not added,outer menu is not working correctly since not highlighting chapter 2

  if scrollspy2 is used for inner menus,similiar issues exist

-->
    <h1>Section 2 (Main Menu)</h1>
      <div id="section21" class="scrollspy inner-container">
        <h2>Section 21 (Submenu)</h2>
    </div>
    <div id="section22" class="scrollspy inner-container">
        <h2>Section 22 (Submenu)</h2>
    </div>
      <div id="section23" class="scrollspy inner-container">
        <h2>Section 23 (Submenu)</h2>
    </div>

</div>
<!-- Subchapters-->

<div id="section3" class="scrollspy outer-container">
  <h1>Section 3</h1>
</div>

我该如何解决？有没有一种方法可以在MaterializeCSS中使用嵌套的“ Scrollspy”？还是有更好的解决方案？您能提供一个代码示例吗？

解决方法

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

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

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