Angular 2 assign css style zur Laufzeit

Ich versuche eine kreisförmige Anordnung von Links mit Angular 2 zu erstellen. Ich habe eine Funktion, die die feste Position der style.left und style.top für jeden Link, basierend auf der Anzahl der Links in der Kreis. Ich habe versucht, diesen Code im Konstruktor meiner Komponente zu verwenden, aber Angular kann nicht erstellt werden und gibt mir den Fehler, dass die Eigenschaft items.length null ist.Angular 2 assign css style zur Laufzeit

Hier ist meine Komponentenklasse-Code, der eine Mischung aus Typoskript und Javascript ist:

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

Quelle

2017-01-20 MaxImpact

Nur eine Randnotiz, der Konstruktor wird für die Abhängigkeitsinjektion verwendet, nicht für die 'Arbeit', die Sie tun sollten, dies innerhalb ngOnInit(); siehe hier: http://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit –

Es ist auch eine Mischung aus eckigen und nicht eckig. Bitte lesen Sie die Anleitungen, wie Sie mit eckigen programmieren können: – smnbbrv

Sie sollten statt "style.left.px] =" styleValues [index] "' oder 'ngStyle' eine Bindung erstellen –

Stattdessen Element innerhalb constructor.You des Zugriffs haben AfterViewInit und Zugriffselement innerhalb ngAfterViewInit Verfahren zu implementieren. überprüfen

DOM nach viewInit.Please initialisieren here

Siehe den folgenden Code:

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

Bitte markieren Sie es als Antwort, wenn es hilft !!!

Quelle

2017-01-20 05:33:33

Angular 2 assign css style zur Laufzeit

Antwort

Verwandte Themen