zoukankan      html  css  js  c++  java
  • [Angular 2] Exposing component properties to the template

    Showing you how you can expose properties on your Controller to access them using #refs inside of your template.

    // letterSelect.ts
    
    import {Component, View, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';
    
    @Component({
        selector: 'letter-select'
    })
    @View({
        directives: [NgFor,FORM_DIRECTIVES],
        template: `
            <select [(ng-model)]="selectedLetter">
                <option *ng-for="#letter of letters">{{letter}}</option>
            </select>
        `
    })
    
    export class LetterSelect {
        letters: string[] = ['e', 's', 'w'];
        selectedLetter: string = 'e';
        constructor() {
    
        }
    }

    todoList.ts

    import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
    import {TodoService} from './todoService';
    import {TodoItemRender} from './todoItemRender';
    import {StartsWith} from './startsWith';
    import {LetterSelect} from './letterSelect';
    
    @Component({
        selector: 'todo-list'
    })
    @View({
        pipes: [StartsWith],
        directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect],
        template: `
              <div>
                    <todo-item-render
                        *ng-for="#todo of todoService.todos | startsWith:'title':letterSelect.selectedLetter"
                        [todoinput]="todo"
                    >
                    </todo-item-render>
                    <letter-select #letter-select></letter-select>
              </div>
        `
    })
    
    export class TodoList{
        constructor(
            public todoService:TodoService
        ){
    
        }
    }
  • 相关阅读:
    LVDS 数据通道详解 单8 单6
    MFC中CTime获取日期时间的方法
    Sqlite 修改字段的名称。
    SQLite 字段数据类型
    把View转化成Image
    iOS 键盘类型UIKeyboardType
    验证银行卡号格式是否正确
    获取手机wifi下的网络地址
    图形处理专题(文章收集)
    收藏的博客
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4926643.html
Copyright © 2011-2022 走看看