Angular2组件ElementRef不工作

时间:2016-09-15 22:28:55

标签: angular

我想在Angular 2中创建一个组件,我可以从HTML传递值。我以为我会使用ElementRef,但我似乎无法正确引用它。

这是我的代码:

import { Component, ElementRef } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    <p>Hello World</p>
    `
})
export class MyAppComponent {
    constructor(private el: ElementRef) {}
    ngOnInit() {
        this.el.nativeElement.style.backgroundColor = 'red';
    }
}

此代码仅用于测试我是否可以控制或至少检查组件的dom元素,但它不起作用。

后来我希望能够从HTML中获取变量

<my-app variable="value"></my-app>

我得到的错误是

Unhandled Promise rejection: Can't resolve all parameters for MyAppComponent: (?). ; Zone: <root> ; Task: Promise.then ; Value: Error: Can't resolve all parameters for MyAppComponent: (?).

我正在使用最近发布的2.0.0版本(不是rc)

1 个答案:

答案 0 :(得分:0)

适合我。

import { Component, ElementRef } from '@angular2/core';
     @Component({
           selector: 'my-app',
           template: `
           <p>Hello World</p>
           {{title}}
           `
})

export class MyAppComponent {
title: string = "This Text will be in red Color";

constructor(private el: ElementRef) {}
ngOnInit() {
    this.el.nativeElement.style.backgroundColor = 'red';
}
}