Angular2 Typescript2：对DOM属性中未反映的Class属性的更改

Question

我试图动态地将对象添加到DOM，但似乎无法获得对DOM属性中显示的类属性所做的任何更改。另外我似乎无法更改DOM对象上的类名称。

当我点击我登录到控制台时，“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？

Answer 1

我最终使用“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