Использование метода Text в TweenLite show undefined - PullRequest
Новая
       17

Использование метода Text в TweenLite show undefined

0 голосов
/ 22 апреля 2019

Я использую Green Sock Animation. В настоящее время я создаю прогресс загрузчика и добавляю счетчик процентов. Пример: - https://codepen.io/linxlatham/pen/aWJaXp

Я использую эту ссылку для ссылки, чтобы показать счетчик процентов, но с помощью текстового метода show undefined

HTML: 

<div class="loader">
  <div class="loader-border">
      <div class="progress" [ngStyle]="{'width': '0%'}">
        <div class="progress-text">
            <p id="count"><p>
        </div>
      </div>
  </div>
</div>

код: 

  progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  constructor() {}
  ngOnInit() {
    this.progres = document.getElementsByClassName('progress')[0];
    this.count = document.getElementById('count');
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        console.log(this.count.innerHTML = this.newPercent + '%');
        console.log('-----' + this.count.text()); //show undefined 
      }
    });
  }

но он работает нормально с помощью innerHTML, пожалуйста, сообщите, если я делаю что-то не так.

1 Ответ

2 голосов
/ 22 апреля 2019

Запрашивать DOM в Angular не рекомендуется. Вам нужно сделать это угловым способом:

Сначала вам нужно использовать переменную ссылки на шаблон, чтобы вы могли ссылаться на них в своем компоненте. Ссылочные переменные шаблона имеют префикс #. 

 <div class="loader">
      <div class="loader-border">
          <div class="progress" [ngStyle]="{'width': '0%'}" #progress>
            <div class="progress-text">
                <p id="count" #count><p>
            </div>
          </div>
      </div>
    </div>

Теперь в вашем компоненте вам нужно импортировать ViewChild и ElementRef и использовать их, как показано ниже: 

  progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  @ViewChild('count') count: ElementRef;
  @ViewChild('progress') count: ElementRef;
  constructor() {}
  ngOnInit() {
    this.progres =  this.progress.nativeElement;
    this.count = this.count.nativeElement;
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        this.count.nativeElement.innerHTML = this.newPercent + '%');

      }
    });
  }
...