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

Question

I declared a component with a selector 'app' then I used it like follow:

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

in the template I wrote this:

The title passed {{ title }}

I did add write the Component annotation:

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

But nothing shows up, the output is

The title passed

Any help? Thanks

Answer 1

At the time of writing the most recent version is alpha.26. The property definition has changed slightly, so here is the new syntax

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

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

I have started a series of blog articles to demo Angular 2 concepts. Check it out here:

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

I have a working example of how to assign properties to components via properties. Check out the tree view example as it uses it heavily.

Answer 2

For some reason, properties don't seem to work on the bootstrapped root app.

Try creating a component called 'title-app' and loading it inside of '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{}

You might also want to use the latest version of Angular2: currently alpha-26 . From alpha-26+, if your property is the same name you can just call it once.

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

Answer 3

the correct way to do this is:

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

See the full Plunker here http://plnkr.co/edit/n2XWez69HNJbixH3tEmR?p=preview

However, this is currently broken and is a known issue https://github.com/angular/angular/issues/1858