Angular2 Typescript2：DOMオブジェクトに反映されていないClassプロパティへの変更

Question

DOMにオブジェクトを動的に追加しようとしていますが、DOMに表示するクラスプロパティに変更を加えることができません。私はDOMオブジェクトのクラス名を変更することはできません。

「クリックした」メソッドが呼び出されたが、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); 
    } 
} 

ここで私が動的に追加しようとしているオブジェクトです：

は、私はちょうどこれを見ますマーカー.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"オブジェクトを使用して、スタイルとクラスの操作を行いました。私はそれが活字体を使用する権利の方法だとは思わない - Angular2に新しく追加された他の人を助け

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); 
    } 
    } 
} 

希望...しかし、私はそれが動作するようになったそれはどのように - それはいくつかのことを中心に作業のように思えますおよびTypescript