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

Question

一直在为此疯狂地挠头。

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

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

在我的主 index.html 文件中，然后能够在我的组件类中读取 hero 的值。

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

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

Answer 1

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

好消息，但对于其他试图弄清楚它的人来说，它已被确认为一个错误！

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

Answer 2

我不得不稍微更改您的示例，因为在我上次检查时（使用 Angular 2.0.0-alpha.21），我在从传递给该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;
   };
}

这主要取自我对这个问题的回答