Angular2 Typescript2:对未反映在DOM对象中的类属性的更改
Angular2 Typescript2:对未反映在DOM对象中的类属性的更改
提问于 2016-11-14 19:24:46
我试图动态地向DOM添加一个对象，但似乎无法对类属性进行任何更改以显示在DOM中。另外，我似乎无法更改DOM对象上的类名。
当我单击时，我会登录到调用“单击”方法的控制台，但style.top和style.left不会更改。而且class属性也不是。我只看到这个：
<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有什么提示吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-17 02:35:28
最后，我使用了"Renderer“和"ElementRef”对象来进行样式和类操作。我不认为这是正确的方式使用TypeScript -这似乎是围绕一些事情-但这是我如何使它工作.
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和打字的人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40596319
复制相关文章
相似问题
腾讯云开发者
