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;
        }
  • 相关阅读:
    序列化二叉树
    把二叉树打印成多行
    按之字形顺序打印二叉树
    对称的二叉树
    二叉树的下一个节点
    java ee项目用gradle依赖打包
    spring cloud gateway 拦截request Body
    oauth2学习
    docker 应用
    gradle spring 配置解释
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4929130.html
Copyright © 2011-2022 走看看