Question

两周前我开始学习角度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动画进度条

1 个答案: