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

在撰寫本文時，最新版本是alpha.26。 屬性定義略有變化，因此這是新語法

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

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

我已經開始撰寫一系列博客文章來演示Angular 2概念。 在這里查看：

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

我有一個工作示例，說明如何通過屬性將屬性分配給組件。 查看樹視圖示例，因為它使用率很高。

Answer 2

由於某些原因， 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 3

正確的方法是：

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