Как изменить это манипулирование телом с помощью манипуляции с секцией в Angular?

Question

Мы пытаемся изменить идентификаторы CSS в зависимости от времени. Дело в том, что в настоящее время он манипулирует телом. Как мы можем изменить это в раздел манипуляции?

Угловая часть

ngOnInit() {
this.run(1000, 10)
}
run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

HTML

<section class='full-screen'>
...
...
</section>

Существуют разные фрагменты CSS для # b1, # b2, # b3 ..., так как приведенный выше код изменяет эти идентификаторы в течение каждого периода времени. Я предполагаю, что что-то должно быть изменено здесь:

document.body.id = "b"+int;  

Как переместить использование этой функции из тела в раздел HTML выше?

Answer 1

Вы можете сделать это благодаря функции углового обзора.

в вашем html:

<div #foo class="myClass"></div>

в вашем файле ts компонента

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
// ....
export MyComponernt implement AfterViewInit {
    // ....
    @ViewChild('foo') foo: ElementRef;
    // ....
    ngAfterViewInit(): void {
        // this is how you manipulate element id properly thanks to angular viewChild feature
        this.foo.nativeElement.id = 'something';
    }
    // ....
}

Answer 2

1. Добавьте переменную ссылки на шаблон в свой шаблон для тега section:

   <section #section class='full-screen'>
      ...
      ...
   </section>
   

2. Добавьте @ViewChild декораторную переменную в файл ts вашего компонента, чтобы получить этот элемент:

   @ViewChild('section', { read: ElementRef }) mySection: ElementRef;
   

3. Теперь вы можете использовать его следующим образом в файле ts вашего компонента:

   ngOnInit() {
     this.run(1000, 10)
   }
   
   run(interval, frames) {
     var int = 1;
   
     function func() {
       this.mySection.nativeElement.id = "b"+int;
       int++;
       if(int === frames) { int = 1; }
     }
   
     var swap = window.setInterval(func.bind(this), interval);
   }
   

См. Это просто ДЕМО

UPDATE:

Обратите внимание, что вы используете function func(), это вызовет проблему с областью видимости при использовании this в качестве объекта компонента. Один из способов исправить это - использовать функцию bind:

var swap = window.setInterval(func.bind(this), interval);

Обновлено демо, чтобы показать это в действии.

Answer 3

document.getElementById ("div_top1"). SetAttribute ("id", "div_top2");

Вы можете использовать это, чтобы изменить идентификатор секции.