각도 2는 런타임에 CSS 스타일을 할당합니다.

각도 2를 사용하여 원형 배열을 만들려고합니다. 각 링크에 대해 style.left 및 style.top의 고정 위치를 설정하는 기능이 있습니다. 원. 이 구성 요소의 생성자에서이 코드를 사용하려고 시도했지만 Angular가 빌드하지 못해서 items.length 속성이 null이라는 오류를 표시합니다.각도 2는 런타임에 CSS 스타일을 할당합니다.

여기 타이프 라이터와 자바 스크립트의 혼합 내 구성 요소 클래스 코드입니다 :

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) + "%"; 
    } 
}

출처

2017-01-20 MaxImpact

사이드 노트는 생성자가 의존성 삽입에 사용되며 ngOnInit()에서 수행해야하는 '작업'을 수행하는 데 사용되지 않습니다. 여기를 참조하십시오 : http://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit –

또한 각도가 혼합되어 있고 각도가 없습니다. 가이드를 읽으십시오. 각도로 프로그래밍하는 방법 – smnbbrv

대신에 [[style.left.px] = "styleValues [index]"'또는'ngStyle' –

대신 constructor.You 내부 요소에 액세스 ngAfterViewInit 방법 내부 AfterViewInit 및 액세스 요소를 구현해야합니다.

DOM은 here

다음 코드를 참조하십시오 확인 viewInit.Please 후 초기화됩니다 : 도움이된다면

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) + "%"; 
    } 
}

답변으로 표시하십시오!

출처

2017-01-20 05:33:33

각도 2는 런타임에 CSS 스타일을 할당합니다.

답변

관련 문제