web-dev-qa-db-ja.com

数カウントアニメーションangular 2

こんにちはangular 2のアニメーションで数を数える必要があります。Jqueryに例があります。angular 2.でこれを達成する必要があります。以下の例のようにする Codepen Example

angulartypescriptanimation
7
Ben10

以下のコードを試してください：

$ npm install ng2-odometer --save

app.module.ts

 import { Ng2OdometerModule } from 'ng2-odometer';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,

  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,FormsModule, 
    Ng2OdometerModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.html

  <div style="font-size: 30px;color: white;">
        <ng2-odometer [number]="number" [config]="{ }"></ng2-odometer>
    </div>

home.ts

export class HomeComponent implements OnInit {

  public number: number = 1000;

  constructor() { }

  ngOnInit() {
  }

}

詳細

6
AddWeb Solution Pvt Ltd

[〜＃〜] rxjs [〜＃〜] を使用してこれを実現できます。

number-tracker.component.ts

import { Component, Input, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { timer } from 'rxjs/observable/timer';
import { switchMap, startWith, scan, takeWhile, takeUntil, mapTo } from 'rxjs/operators';

@Component({
  selector: 'number-tracker',
  template: `
    <h3> {{ currentNumber }}</h3>
  `
})
export class NumberTrackerComponent implements OnDestroy {
  @Input()
  set end(endRange: number) {
    this._counterSub$.next(endRange);
  }
  @Input() countInterval = 20;
  public currentNumber = 0;
  private _counterSub$ = new Subject();
  private _onDestroy$ = new Subject();

  constructor() {
    this._counterSub$
      .pipe(
        switchMap(endRange => {
          return timer(0, this.countInterval).pipe(
            mapTo(this.positiveOrNegative(endRange, this.currentNumber)),
            startWith(this.currentNumber),
            scan((acc: number, curr: number) => acc + curr),
            takeWhile(this.isApproachingRange(endRange, this.currentNumber))
          )
        }),
        takeUntil(this._onDestroy$)
      )
      .subscribe((val: number) => this.currentNumber = val);
  }

  private positiveOrNegative(endRange, currentNumber) {
    return endRange > currentNumber ? 1 : -1;
  }

  private isApproachingRange(endRange, currentNumber) {
    return endRange > currentNumber
      ? val => val <= endRange
      : val => val >= endRange;
  }

  ngOnDestroy() {
    this._onDestroy$.next();
    this._onDestroy$.complete();
  }
}

使用量

<p>
  <input
    type="number"
    (keyup.enter)="counterNumber = vanillaInput.value"
    #vanillaInput
  />
  <button (click)="counterNumber = vanillaInput.value">
    Update number
  </button>
</p>
<number-tracker [end]="counterNumber"></number-tracker>

幸運を！

3
bobbyg603

なので ng2-odometerは古く、更新されていません。Angular 5.と互換性のある angular2-counto パッケージを使用することをお勧めします。 demo 。

1
Vahid