javascript - Angular 2 使用 ngOnInit 来应用样式属性

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';
        }
      }
    }
  }

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