Question

虽然下面的代码在检查元素时没有产生错误，但样式不会应用于class =“circle”的元素。请不要将我介绍给ngStyle，我想知道为什么这不起作用。

export class PlayersComponent implements OnInit {
        items: any;

        ngOnInit() {

          this.items = document.querySelector('.circle');
          for(var i = 0; i < this.items.length; i++){
            if(i % 2 == 0) {
            this.items[i].style.color = '#0000FF';
            }
            else {
              this.items[i].style.color = '#FF0000';
            }
          }
        }
    }

Answer 1

OnInit中尚未呈现元素。您需要使用AfterViewInit以及querySelectAll来获取所有元素。

    export class AppComponent implements AfterViewInit {
    items: any;

    ngAfterViewInit() {
      this.items = document.querySelectorAll('.circle');
      for (let i = 0; i < this.items.length; i++) {
        if (i % 2 === 0) {
          this.items[i].style.color = '#0000FF';
        }
        else {
          this.items[i].style.color = '#FF0000';
        }
      }
    }
  }

以这种方式访问DOM在Angular 2中并不是一个好主意。这个article是以Angular方式做事的好指南。

Answer 2

与其他人所说的一样，在Angular 2中操纵DOM通常不是首选方法。

但是，如果你想要这样做，你应该调用ngAfterViewInit（像ngOnInit这样的生命周期钩子）来确保在运行代码之前存在DOM元素。

另一个问题可能是你没有操纵正确的DOM元素，但如果没有更多的信息就无法分辨。

Angular 2使用ngOnInit应用样式属性

2 个答案: