码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] Passing data to components with 'properties'

时间:2015-11-02 06:41:39      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

Besides @Input(), we can also use properties on the @Component, to pass the data.

import {Component, View, NgFor, Input} from ‘angular2/angular2‘;

@Component({
    selector: ‘reddit-article‘
})
@View({
    directives: [],
    template: `
        <article>
            <div class="votes">{{article.votes}}</div>
            <div class="main">
                <h2>
                    <a href="{{article.link}}">{{article.title}}</a>
                    <span>({{ article.domain() }})</span>
                </h2>
                <ul>
                    <li><a href (click)="article.voteUp()">Up</a></li>
                    <li><a href (click)="article.voteDown()">Down</a></li>
                </ul>
            </div>
        </article>
    `
})

export class RedditArticle {
    @Input() article: Article;

    voteUp() {
        this.article.voteUp();
        return false;
    }

    voteDown() {
        this.article.voteDown();
        return false;
    }
}

 

Works the same as:

import {Component, View, NgFor, Input} from ‘angular2/angular2‘;

@Component({
    selector: ‘reddit-article‘,
    properties: [‘article‘]

})
@View({
    directives: [],
    template: `
        <article>
            <div class="votes">{{article.votes}}</div>
            <div class="main">
                <h2>
                    <a href="{{article.link}}">{{article.title}}</a>
                    <span>({{ article.domain() }})</span>
                </h2>
                <ul>
                    <li><a href (click)="article.voteUp()">Up</a></li>
                    <li><a href (click)="article.voteDown()">Down</a></li>
                </ul>
            </div>
        </article>
    `
})

export class RedditArticle {
    article: Article;

    voteUp() {
        this.article.voteUp();
        return false;
    }

    voteDown() {
        this.article.voteDown();
        return false;
    }

 

[Angular 2] Passing data to components with 'properties'

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/4929130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!