Angular2 Typescript2：對DOM屬性中未反映的Class屬性的更改

我試圖動態地將對象添加到DOM，但似乎無法獲得對DOM屬性中顯示的類屬性所做的任何更改。另外我似乎無法更改DOM對象上的類名稱。Angular2 Typescript2：對DOM屬性中未反映的Class屬性的更改

當我點擊我登錄到控制檯時，「clicked」方法被調用，但style.top和style.left不會改變。而班級屬性也不是。我剛纔看到這一點：在做刀片

<div ng-reflect-class-name="marker" class="marker">...</div>

代碼：

page.ts

import { Component, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; 

import { Marker } from './marker'; 

@Component({ 
    selector: 'page', 
    templateUrl: 'page.html' 
}) 
export class MyPage { 
    constructor(private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) { 

    } 
    clicked(e: MouseEvent) { 
    const factory = this.resolver.resolveComponentFactory(Marker); 
    let component = this.vcRef.createComponent(factory, 1, this.vcRef.injector); 
    component.instance.place(0,0, 50, 0, 150); 
    } 
}

這裏是我想要動態添加對象：

marker.ts

個

import { Component } from '@angular/core'; 

@Component({ 
    selector: '.markers', 
    templateUrl: 'marker.html' 
}) 
export class Marker { 
    protected left: number; 
    protected bottom: number; 
    protected class: string; 
    protected form: any; 

    constructor() { 
     this.class = "marker"; 
     this.form = { 
     x: 0, 
     y: 0, 
     title: '' 
    } 
    } 

    place(percentX: number, percentY: number, x: number, y: number, width: number) { 
    console.log("placing"); 
    this.form.x = percentX; 
    this.form.y = percentY; 
    this.left = x; 
    this.bottom = y; 
    if (x < width/2) { 
     this.class = "marker right"; 
    } else { 
     this.class = "marker left"; 
    } 
    } 
}

marker.html

<div [class]="class" [style.left]="left" [style.bottom]="bottom"> 
    <ion-input class="input-title" type="text" placeholder="Title" [(ngModel)]="form.title"></ion-input> 
</div>

任何提示此Angular2的n00b？

來源

2016-11-14 aproximation

我最終使用「Renderer」和「ElementRef」對象來進行樣式和類操作。我不認爲這是使用打字稿中正確方式 - 它看起來像周圍的一些東西的工作 - 但它是我如何得到它的工作...

import { Component, ElementRef, Renderer } from '@angular/core'; 

@Component({ 
    selector: "marker", 
    templateUrl: 'marker.html' 
}) 
export class PainStatusMarker { 
    protected form: any; 

    constructor(public element: ElementRef, public renderer: Renderer) { 
     this.form = { 
     x: 0, 
     y: 0, 
     title: '' 
    } 
    } 

    place(percentX: number, percentY: number, x: number, y: number, width: number) { 
    this.form.x = percentX; 
    this.form.y = percentY; 
    this.renderer.setElementStyle(this.element.nativeElement, "bottom", (-1 * y) + 'px'); 
    if (x < width/2) { 
     this.renderer.setElementClass(this.element.nativeElement, "right", true); 
    } 
    } 
}

希望幫助別人誰是新的Angular2和Typescript

來源

2016-11-17 02:35:28 aproximation

Angular2 Typescript2：對DOM屬性中未反映的Class屬性的更改

回答

相關問題