Javascript Angular 2 alpha 22，如何通过属性将值传递给组件？

我声明了一个带有选择器“app”的组件 然后我使用它，如下所示：

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

我确实添加并编写了组件注释：

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

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

The title passed

---

有什么帮助吗？感谢

出于某种原因，

属性

在引导的根应用程序上似乎不起作用

尝试创建一个名为“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{}

//内部组件
@组成部分({
选择器：“标题组件”，
属性：{title:'title'}
})
@视图（{模板：{{title}}}）
类标题组件{}
//根应用程序
@组件（{selector:'app'}）
@视图（{
指令：标题组件，
模板：“”
})
类App{}

您可能还想使用Angular2:Current的最新版本。从alpha-26+，如果您的属性是相同的名称，您可以只调用一次

---

properties:{'title'：'title'}

=>

properties:'title'

出于某种原因，

属性在引导的根应用程序上似乎不起作用

尝试创建一个名为“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{}

//内部组件
@组成部分({
选择器：“标题组件”，
属性：{title:'title'}
})
@视图（{模板：{{title}}}）
类标题组件{}
//根应用程序
@组件（{selector:'app'}）
@视图（{
指令：标题组件，
模板：“”
})
类App{}

您可能还想使用Angular2:Current的最新版本。从alpha-26+，如果您的属性是相同的名称，您可以只调用一次

属性：{'title'：'title'}
=>
属性：'title'
正确的方法是：

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);

在这里看到完整的扑通声了吗

但是，这一点目前已被打破，这是一个已知的问题
正确的做法是：

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);

在这里看到完整的扑通声了吗

但是，这一点目前已被打破，并且在撰写本文时是一个已知问题。最新版本是alpha.26。
属性定义稍有更改，因此下面是新语法

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

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

@组件({
选择器：“应用程序”，
属性：['title:title']
});

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


我有一个如何通过属性将属性指定给组件的工作示例。查看树视图示例，因为它大量使用它。
在编写本文时，最新版本是alpha.26。
属性定义稍有更改，因此下面是新语法

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

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

@组件({
选择器：“应用程序”，
属性：['title:title']
});

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


我有一个如何通过属性将属性指定给组件的工作示例。查看树视图示例，因为它大量使用它。
在本例中，我想使用两个属性@Attribute让我们假设goofy和toffy。但这对我不起作用。有什么解决办法吗。我用的是角度α42。属性对于一个属性工作正常。看起来导入现在是从“angular2/core”

导入{Attribute}。我使用的是alpha 47。在本例中，我想使用两个带有@Attribute的属性，假设是goofy和toffy。但这对我不起作用。有什么解决办法吗。我用的是角度α42。属性对于一个属性工作正常。看起来导入现在是从“angular2/core”导入{Attribute}。我使用的是alpha 47。如果您需要使用根应用程序（例如，因为您正在从静态HTML传递属性），您仍然可以。您必须使用ElementRef，但是：属性的语法已更改为['title:title']，如果您需要使用根应用程序（例如，因为您从静态HTML传递属性），您仍然可以。不过，您必须使用ElementRef：属性的语法已更改为['title:title']