Question

我正在尝试使用打字稿制作键入动画，每200毫秒从字符串中追加下一个字符。

我阅读了很多有关zone和ChangeDetectorRef的解决方案，但是没有用。

问题是整个字符串在完成显示最终结果的过程后显示（没有动画:(）

编辑：

我正在使用Angular 2。

这是我简单的app.component.ts

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '';
  nots="app works!";

constructor(private ref: ChangeDetectorRef){
  setTimeout(() => {


  this.sleep(200);
    this.title='a';
    this.ref.detectChanges();

     this.sleep(200);
    this.title+='a';
    this.ref.detectChanges();

      this.sleep(200);
    this.title+='a';
    this.ref.detectChanges();

      this.sleep(200);
    this.title+='a';
    this.ref.detectChanges();

      this.sleep(200);
    this.title+='a'; 
    this.ref.detectChanges();

    console.log(3);
 }, 1000);    
}

 sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
}

您可以看到我想像这样显示aaaaa： aa aaa aaa aaaaa。有帮助吗？

Answer 1

Here is one approach that you might want to try:

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';
  ngOnInit() {
    interval(500)
    .pipe(
      take(5)
    )
    .subscribe(_ =>
      this.name += 'a'
    );
  }
 }

demo https://stackblitz.com/edit/angular-6pkbhk?file=src%2Fapp%2Fapp.component.ts

Alternatively, you can still use plain old promise appraoch, which sticks more closely to your original approach,

  import { Component } from '@angular/core';
  import { interval } from 'rxjs';
  import { take } from 'rxjs/operators';


  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = '';
    ngOnInit() {

      this.sleep(200)
        .then(() => this.title = 'a')
        .then(() => this.sleep(200))
        .then(() => this.title += 'a')
        .then(() => this.sleep(200))
        .then(() => this.title += 'a')
        .then(() => this.sleep(200))
        .then(() => this.title += 'a')
        .then(() => this.sleep(200))
        .then(() => this.title += 'a')

   // same as 
  /*  let promise: any = this.sleep(delay)
      .then(() => this.title = 'a');

    for (let i = 0; i < 4; i++) {
      promise = promise
        .then(() => this.sleep(delay))
        .then(() => this.title += 'a')
    } */
    }

    sleep(milliseconds) {
      let resolve;
      let promise = new Promise((_resolve) => {
        resolve = _resolve;
      });
      setTimeout(() => resolve(), milliseconds);
      return promise;
    }
  }

demo https://stackblitz.com/edit/angular-d8ur5y?file=src%2Fapp%2Fapp.component.ts

每次更改打字稿后更新html绑定

1 个答案: