2016-09-15 164 views
1

我想在Angular 2中创建一个组件,我可以从HTML传入值。我以为我会使用ElementRef,但我似乎无法无误地引用它。Angular2组件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 )

+0

你会发布你收到的错误吗?我读过,在某些情况下,elementRef不受支持。 – Clint

+0

未处理的Promise拒绝:无法解析MyAppComponent的所有参数:(?)。 ;区域:;任务:Promise.then;值:错误:无法解析MyAppComponent的所有参数:(?)。 – user2791747

+0

检查这个问题,我认为它会解决你的问题http://stackoverflow.com/questions/34970778/get-root-component-elementref-or-componentref-angular-2 – Clint

回答

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'; 
} 
} 
+1

我认为你可能会使用旧版本。我正在使用2.0.0版本。我知道这是可能的旧版本,但它似乎不可能了。我想我们将不得不寻找一种不同的方式来从主机元素传入数据。 – user2791747