zoukankan      html  css  js  c++  java
  • [Angular 2] Passing data to components with 'properties'

    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;
        }
  • 相关阅读:
    Windows2012中安装域控(DC) + SQL Server 2014 + TFS 2015
    CentOS7上GitHub/GitLab多帐号管理SSH Key
    CentOS7安装Cobbler
    Windows2012中Python2.7.11+Python3.4.4+Pycharm
    CentOS7上Nginx的使用
    CentOS7上GitLab的使用
    CentOS7安装Puppet+GitLab+Bind
    python
    接口自动化测试链接https://www.cnblogs.com/finer/
    Android sdk测试方法链接
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4929130.html
Copyright © 2011-2022 走看看