Angular5 动画进度条

Question

我两周前开始学习 angular 5，我想在 html 活动中练习。以前我使用 jquery 多年，所以我需要一些帮助。我想做的可以分为两个步骤： 1) 将进度条从 0 动画化到 0 到 100 之间的 n 值； 2) 滚动后屏幕出现进度条时执行第1点的方法

我整个早上都在寻找解决方案，但我什么也没找到。有人可以帮助我吗？

谢谢

Answer 1

我建议通过 npm 安装 ngx-bootstrap 和 ngx-scroll-event。然后根据自己的喜好调整设置和数字。我将提供我从玩弄一些东西中得到的东西。

app.component.ts

import { Component } from '@angular/core';
import { ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { ScrollEvent } from 'ngx-scroll-event';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [{ provide: ProgressbarConfig, useFactory: getProgressbarConfig }]
})
export class AppComponent {
  public max = 100;
  public progress = 20;

  public changeProgress(event: ScrollEvent, value: number, current: number): void {
      this.progress = value;
  }

}

export function getProgressbarConfig(): ProgressbarConfig {
  return Object.assign(new ProgressbarConfig(), { animate: true, striped: true max: 100 });
}

app.componenet.html

<div style="height:1000px"></div>

<div style="height: 500px" detect-scroll (onScroll)="changeProgress($event, 70, progress)" [bottomOffset]="200" [topOffset]="200">
  <div class="mb-2">
    <progressbar class="progress-striped active"  [value]="progress" [max]="100" type="success"> {{progress}} / {{max}}</progressbar>
  </div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollEventModule,
    ProgressbarModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular5 动画进度条

Angular5 animated progress bar

html

web-component

progress-bar

angular5