Angular 使用动画时角度平滑滚动不工作

我不熟悉Angular，并尝试设置平滑滚动：

我的视图设置如下：

<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>

export class StepsComponent implements DoCheck {
  step: number = 0;
  max: number = 0;
  private path: string;

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

  ngDoCheck() {
    switch (this.path) {
      case 'one': this.changeStep(1); break;
      case 'two': this.changeStep(2); break;
      case 'three': this.changeStep(3); break;
      case 'results': this.changeStep(4); break;
      default: this.changeStep(0); break;
    }    
  }

  private changeStep(step) {
    var current = this.step;

    this.step = step;
    if (step > current) {
      this.max = step;
    }
  }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AnimationService {
  private animatingSubject = new Subject<boolean>();

  animating = this.animatingSubject.asObservable();

  constructor() { }

  loading(state: boolean) {
    this.animatingSubject.next(state);
  }
}

<div [@routerTransition]="prepareRouteTransition(outlet)" (@routerTransition.start)="handleStart()" (@routerTransition.done)="handleDone()">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

<piiick-header></piiick-header>
<piiick-animations></piiick-animations>
<piiick-spinner></piiick-spinner>

import { Component } from '@angular/core';
import { query, style, animate, trigger, transition, group } from '@angular/animations';

import { AnimationService } from '../../core/services/animation.service';

const routerTransition = trigger('routerTransition', [
  transition('* => home', [
    query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    group([
      query(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
      ], { optional: true }),
    ])
  ]),
  transition('* => steps', [
    group([
      query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

@Component({
  selector: 'piiick-animations',
  templateUrl: './animations.component.html',
  styleUrls: ['./animations.component.scss'],
  animations: [routerTransition]
})
export class AnimationsComponent {
  constructor(private animationService: AnimationService) { }

  prepareRouteTransition(outlet) {
    return outlet.activatedRouteData.state;
  }

  handleStart(e) {
    this.animationService.loading(true);
  }

  handleDone(e) {
    this.animationService.loading(false);
  }
}

应该发生的是，当调用route

/steps/three

时，它将平滑滚动到id等于three的div。 这是有效的，直到我打开页面转换动画

我现在在我的

应用程序组件中有此代码

：

import { Component } from '@angular/core';
import { query, style, animate, trigger, transition, group } from '@angular/animations';

const routerTransition = trigger('routerTransition', [
  transition('* => home', [
    query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    group([
      query(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
      ], { optional: true }),
    ])
  ]),
  transition('* => steps', [
    group([
      query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

@Component({
  selector: 'piiick-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [routerTransition]
})
export class AppComponent {
  prepareRouteTransition(outlet) {
    return outlet.activatedRouteData.state;
  }
}

当

动画

被注释掉时，平滑滚动工作；但当它被启用时，smoothScroll不会启动。

---

有人知道为什么吗？

我想我找到了答案。 如果找到一个帖子，其中有人正在展示如何在动画完成后触发事件。 因此，我创建了一个动画服务，如下所示：

<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>

export class StepsComponent implements DoCheck {
  step: number = 0;
  max: number = 0;
  private path: string;

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

  ngDoCheck() {
    switch (this.path) {
      case 'one': this.changeStep(1); break;
      case 'two': this.changeStep(2); break;
      case 'three': this.changeStep(3); break;
      case 'results': this.changeStep(4); break;
      default: this.changeStep(0); break;
    }    
  }

  private changeStep(step) {
    var current = this.step;

    this.step = step;
    if (step > current) {
      this.max = step;
    }
  }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AnimationService {
  private animatingSubject = new Subject<boolean>();

  animating = this.animatingSubject.asObservable();

  constructor() { }

  loading(state: boolean) {
    this.animatingSubject.next(state);
  }
}

<div [@routerTransition]="prepareRouteTransition(outlet)" (@routerTransition.start)="handleStart()" (@routerTransition.done)="handleDone()">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

<piiick-header></piiick-header>
<piiick-animations></piiick-animations>
<piiick-spinner></piiick-spinner>

import { Component } from '@angular/core';
import { query, style, animate, trigger, transition, group } from '@angular/animations';

import { AnimationService } from '../../core/services/animation.service';

const routerTransition = trigger('routerTransition', [
  transition('* => home', [
    query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    group([
      query(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
      ], { optional: true }),
    ])
  ]),
  transition('* => steps', [
    group([
      query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

@Component({
  selector: 'piiick-animations',
  templateUrl: './animations.component.html',
  styleUrls: ['./animations.component.scss'],
  animations: [routerTransition]
})
export class AnimationsComponent {
  constructor(private animationService: AnimationService) { }

  prepareRouteTransition(outlet) {
    return outlet.activatedRouteData.state;
  }

  handleStart(e) {
    this.animationService.loading(true);
  }

  handleDone(e) {
    this.animationService.loading(false);
  }
}

如您所见，当动画开始时，它更新AnimationService并将动画属性设置为true，当它完成动画时，它只需再次更新服务并将属性设置为false

现在，我们正在使用平滑滚动。 起初我无法让它工作，然后我想这不仅仅是我必须等待的动画，还有内容；因此，我在步骤组件中添加了一个属性，该属性在视图初始化后更新

我将HTML更新为：

<div *ngIf="scrollIf">
    <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>
</div>

现在，动画和平滑滚动开始工作。我使用这种方法的唯一问题是，视图在初始化之前不会显示。我不确定这是否是个问题