javascript - 如何通过 Angular 中的截面操作来改变这种 body 操作？

Question

我们正在尝试根据时间更改 CSS id。关键是，现在它操纵着 body 。我们如何将其更改为节操作？

有 Angular 部分

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>

#b1、#b2、#b3... 有不同的 css 片段，因为上面的代码在每个时间段都会更改这些 id。我认为这里应该进行一些更改:

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

如何将该函数的使用从正文移动到上面的 HTML 部分？

Answer 1

1. 添加Template reference variable在您的模板中的 section 标记中:

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

2. 在组件的 ts 文件中添加一个 @ViewChild 装饰变量来获取此元素:

   @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);
   }
   

看看这个简单的DEMO

更新:

请注意，您正在使用 function func()，这会导致您在使用 this 作为组件对象时出现范围界定问题。解决此问题的一种方法是使用 bind 函数:

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

更新了演示以展示其实际效果。