如何从 Angular2 中的主组件获取组件属性？

Question

为此抓狂。

基本上我想要的只是在我的 index.html 中：

<app hero="iron man"></app>

在我的主 index.html 文件中，然后能够在我的组件 class.

中读取 hero 的值

在这已经一个星期了，但无济于事。这是我无法正常工作的 plunkr：

http://plnkr.co/edit/FNoNSG0JmBWScSbi4KbT?p=preview

Answer 1

我不得不稍微更改您的示例，在我上次检查时（使用 Angular 2.0.0-alpha.21），我在从同一组件检索属性时遇到问题 class 传递给 bootstrap 方法。

然而，使用一个稍微修改过的例子：

@Component({
  selector: 'hero',
  properties: {'name':'name'}
})
@View({
  template:`<h1>Hero = {{_name}}</h1>`
})
class Hero {
  _name: string;

  constructor() { 
  };

  set name(name){
    this._name = name;
  }
}

@Component({
  selector: 'app',
})
@View({
  template:
  `
    <div>
      <hero name="iron man"></hero>
    </div>
  `,
  directives: [Hero]
})
class Application {
  constructor() { };
}

bootstrap(Application);

然后在你的 HTML:

<app>
   <hero name="iron man" />
</app>

请注意，在您的构造函数中，_name 将是未定义的。要在您的构造器中使用属性，您可以注入它：

class Hero {
   _name: string;

   constructor(@Attribute('name') name:string) { 
       this._name = name;
   };
}

这主要摘自我对

的回答

Answer 2

感谢您的宝贵时间和回复！不幸的是，在您的场景中您仍然没有检索对象的属性，您只是将第二个对象放入第一个对象并检索这些属性。

好消息，虽然对于其他试图解决这个问题的人来说，它已被确认为一个错误！

https://github.com/angular/angular/issues/1858#event-305799002

如何从 Angular2 中的主组件获取组件属性？

How to get component properties from main component in Angular2?

angular