Question

我正在尝试使用Angular 2创建链接的循环排列。我有一个函数，根据链接的数量为每个链接设置style.left和style.top的固定位置圆圈。我试图在我的组件的构造函数中使用此代码，但Angular无法构建，给我一个items.length属性为null的错误。

这是我的组件类代码，它是typescript和javascript的混合：

export class PlayersComponent {
items: any;
constructor() {
  this.items = document.querySelector('.circle');
  for(var i = 0, l = this.items.length; i < l; i++){
    this.items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
    this.items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  }
}

Answer 1

而不是访问构造函数中的元素。您必须在 ngAfterViewInit 方法中实现 AfterViewInit 和访问元素。

在viewInit之后初始化DOM。请检查here

请参阅以下代码：

import {Component,AfterViewInit} from '@angular/core'; 
export class PlayersComponent implements AfterViewInit{
  items: any;
  ngAfterViewInit() {
     this.items = document.querySelector('.circle');
     for(var i = 0, l = this.items.length; i < l; i++){
        this.items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2(1/l)*i*Math.PI)).toFixed(4) + "%";
        this.items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  }
}

如果有帮助，请将其标记为答案!!!

Angular 2在运行时分配css样式

1 个答案: