Angular 2 alpha 22、如何通过属性给组件传值？

Question

我用选择器声明了一个组件'app' 然后我像下面这样使用它：

<app title="Awesome Title"></app>

在我写的模板中：

The title passed {{ title }}

我确实添加了组件注释：

@Component({
    selector: 'app',
    properties: {title:'title'}  // also tried ['title']
});

但是什么也没有显示，输出是

The title passed

有什么帮助吗？谢谢

Answer 1

出于某种原因，properties 似乎无法在引导的根应用程序上运行。

尝试创建一个名为 'title-app' 的组件并将其加载到 'app' 中。

// inner component
@Component({
  selector: 'title-component',
  properties: {title:'title'}
})
@View({ template: '<h1>{{title}}</h1>'})
class titleComponent{}

// root app
@Component({ selector: 'app' })
@View({ 
  directives: titleComponent, 
  template: '<title-component [title]="Some Title"></title-component>' 
})
class App{}

您可能还想使用最新版本的 Angular2：当前 alpha-26。从 alpha-26+ 开始，如果您的属性与您的名字相同，您只需调用一次即可。

properties: {'title': 'title'} => properties: 'title'

Answer 2

正确的做法是：

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {Attribute} from 'angular2/src/core/annotations_impl/di';


@Component({
  selector: 'app'
})
@View({
  template: '{{goofy}} stuff'
})
class App {
  goofy:string;
  constructor(@Attribute('goofy') goofy:string) {
      this.goofy = goofy;
  }
}

bootstrap(App);

在此处查看完整的 Plunker http://plnkr.co/edit/n2XWez69HNJbixH3tEmR?p=preview

但是，这目前已损坏并且是一个已知问题 https://github.com/angular/angular/issues/1858

Answer 3

在撰写本文时，最新版本是 alpha.26。属性定义略有变化，因此这里是新语法

@Component({
    selector: 'app',
    properties: ['title:title']
});

<div [title]="Some Title"></div>

我已经开始撰写一系列博客文章来演示 Angular 2 个概念。在这里查看：

http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

我有一个工作示例，说明如何通过属性将属性分配给组件。查看树视图示例，因为它大量使用了它。

Angular 2 alpha 22、如何通过属性给组件传值？

Angular 2 alpha 22, How to pass down a value to a component through attributes?

javascript

angular