Question

这不符合我的预期。我有一个看起来像这样的组件：

<div class="nav">
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <a class="btn btn-secondary" [routerLink]="['/home']" *ngIf="path === 'one'">Home</a>

        <a class="btn btn-primary" [routerLink]="['/' + category, 'one']" [scrollTo]="'one'" offset="60" *ngIf="path === 'two'">Back</a>
        <a class="btn btn-primary" [routerLink]="['/' + category, 'two']" [scrollTo]="'two'" offset="60" *ngIf="path === 'three'">Back</a>
        <a class="btn btn-primary" [routerLink]="['/' + category, 'three']" [scrollTo]="'three'" offset="60" *ngIf="path === 'results'">Back</a>

        <a class="btn btn-secondary" [routerLink]="['/' + category, 'one']" [scrollTo]="'one'" offset="60" *ngIf="path === 'results'">Reset</a>

        <a class="btn btn-primary" [routerLink]="['/' + category, 'two']" [scrollTo]="'two'" offset="10" *ngIf="path === 'one'">Next</a>
        <a class="btn btn-primary" [routerLink]="['/' + category, 'three']" [scrollTo]="'three'" offset="10" *ngIf="path === 'two'">Next</a>
        <a class="btn btn-primary" [routerLink]="['/' + category, 'results']" [scrollTo]="'results'" offset="10" *ngIf="path === 'three'">Next</a>        
      </div>
    </div>
  </div>
</div>

组件代码如下：

import { Component, HostListener } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'piiick-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {
  category: string;
  path: string;

  private paths: any[] = [
    { id: 'one' }, 
    { id: 'two' }, 
    { id: 'three' }, 
    { id: 'results' }];

  @HostListener('window:scroll')
  onScroll(): void {
    let mousePosition = window.scrollY;
    this.setPathPositions();
    this.setPath(mousePosition);
  }

  constructor(
    private route: ActivatedRoute
  ) {
    this.route.params.subscribe(params => {
      this.category = params.category;
      this.path = params.path;
    })
  }

  private setPathPositions(): void {
    let offset = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-top'));

    for(var i = 0; i < this.paths.length; i++) {
      let path = this.paths[i];
      let element = document.getElementById(path.id);
      if (!element) continue;

      let position = element.offsetTop - offset;
      path.position = position;
    };
  }

  private setPath(mousePosition: number): void {
    let maxIndex = this.paths.length - 1;

    for(var i = 0; i < this.paths.length; i++) {
      let path = this.paths[i];     

      if (i < maxIndex) {
        if (mousePosition > path.position && mousePosition < this.paths[i + 1].position) {          
          this.path = path.id;
          console.log(path.id);
        }
      } else {
        if (mousePosition > path.position) {       
          this.path = path.id;
          console.log(path.id);
        }
      }
    }
  }
}

要对此进行介绍，这是我的“步骤”组件：

<piiick-one smoothScroll offset="10" [scrollIf]="step === 1"></piiick-one>
<piiick-two *ngIf="max >= 2" smoothScroll offset="10" [scrollIf]="step === 2"></piiick-two>
<piiick-three *ngIf="max >= 3" smoothScroll offset="10" [scrollIf]="step === 3"></piiick-three>
<piiick-results *ngIf="max >= 4" smoothScroll offset="10" [scrollIf]="step === 4"></piiick-results>

<piiick-navigation></piiick-navigation>

如您所见，每个组件均基于“ step”值进行加载。在所有这些更改期间都会显示导航。

没有我的 window：scroll 方法，发生的事情是，当我第一次单击“下一步”按钮时，它将加载新组件并滚动到该组件。没关系我意识到的是，在加载所有组件时，如果我手动上下滚动页面，则“ next / back”按钮不会更改其路径（因为url尚未更改）。

因此，我决定添加一个scroll方法，该方法将检测滚动在页面上的位置，相对于它滚动过去的元素。然后，我更新 path 属性，以便在手动滚动时显示右键。

这个主意听起来不错，但实际上我注意到了一些问题。最令人讨厌的是，滚动时按钮似乎闪烁。特别是如果我单击其中一个按钮。此外，有时他们会陷入困境，却没有意识到还有另外一步：/

有人知道我是不是这样做正确，还是有更好的方法呢？

滚动上的角度更改按钮

0 个答案: