Question

我正在使用Angular 6，并且在我的项目中有4个组件。我想将所有这些组件添加到单个页面中，并且希望我激活正确的菜单项，并且当我滚动到单个页面中的不同组件时，URL更改为正确的路由。我一直在为此苦苦挣扎，任何帮助都将不胜感激。

这是我的header.component.html

    <section class="module-small navbar-light">
<mdb-navbar  SideClass="navbar fixed-top navbar-custom navbar-expand-lg scrolling-navbar ie-nav" [containerInside]="false">
  <logo class="logo">
    <img src="./assets/images/phf-logo.png" />
  </logo>
  <links class="links">
    <ul class="navbar-nav mr-auto">
    </ul>
    <ul class="navbar-nav navbar-flex-icons">
      <li class="nav-item active waves-light" mdbRippleRadius [ngClass]="{'green-text': activeMenu=='about'}" routerLink="/about"
       (click)="scroll(about,'about')">
        <a class="nav-link">ABOUT<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item waves-light" mdbRippleRadius [ngClass]="{'green-text': activeMenu=='features'}" routerLink="/features" (click)="scroll(features,'features')">
        <a class="nav-link">FEATURES</a>
      </li>
      <li class="nav-item waves-light" mdbRippleRadius [ngClass]="{'green-text': activeMenu=='management'}" routerLink="/management" (click)="scroll(management,'management')">
        <a class="nav-link">MANAGEMENT</a>
      </li>
      <li class="nav-item waves-light" mdbRippleRadius [ngClass]="{'green-text': activeMenu=='contact'}" routerLink="/contact"
      (click)="scroll(contact,'contact')" (scroll)="scrollHandler($event)">
        <a class="nav-link">CONTACT</a>
      </li>
    </ul>
  </links>
</mdb-navbar>
</section>

<div class="text-center">
  <div #about>
    <app-about></app-about>
  </div>
  <div #features>
    <app-features></app-features>
  </div>
  <div #management>
    <app-management></app-management>
  </div>
  <div #contact>
    <app-contact></app-contact>
  </div>
</div>

Header.component.ts

  scroll(el,name) {
this.activeMenu = name;
this.el =el;
el.scrollIntoView({ behavior: 'smooth', block: 'start'  });

}

通过上述功能，单击菜单项后，我可以滚动到正确的div。

问题是： 1）当我滚动到同一页面上的其他组件时，无法将菜单更改为活动菜单。 2）URL不变。

谢谢。

Answer 1

基本上，当组件位置到达特定位置时，您需要触发或调用该方法。

private void checkNoSelection() {
    if(!cbBM.isChecked() && !cbBI.isChecked() && !cbMath.isChecked() && !cbSc.isChecked()) {
           Toast.makeText(getActivity(), "Please tick at least one of your selections.", Toast.LENGTH_SHORT).show();
    }
}

示例演示在这里https://stackblitz.com/edit/angular-zej55w

单页应用程序Angular 6中的组件路由

1 个答案: