zoukankan      html  css  js  c++  java
  • [Angular 2] Use Service use Typescript

    When creating a service, need to inject the sercive into the bootstrap():

    import {bootstrap, Component, View} from "angular2/angular2";
    import {TodoInput} from "./todoInput";
    import {TodoService} from "./todoService";
    
    @Component({
        selector:'app'
    })
    @View({
        directives: [TodoInput],
        template: `
            <div><todo-input></todo-input></div>
        `
    })
    class App{
    
    }
    
    bootstrap(App, [TodoService]);

    todoService.js

    export class TodoService{
        todos: string[] = [];
    
        addTodo(value: any):void {
            this.todos.push(value);
        }
    }

    inputTodo.js:

    import {Component, View} from "angular2/angular2";
    import {TodoService} from "./todoService";
    
    @Component({
        selector: 'todo-input'
    })
    
    // Define a ref by using xxx-YYY
    // Reference a ref by using xxxYyy
    @View({
        template: `
            <input type="text" #log-me />
            <button (click)="onClick($event, logMe.value)">Log Input</button>
        `
    })
    export class TodoInput{
        constructor(
            public todoService:TodoService  //pulbic make todoService global available for the class
        ){
            console.log(todoService);
        }
    
        onClick(event , value){
            this.todoService.addTodo(value);
            console.log(this.todoService.todos);
        }
    }
  • 相关阅读:
    557. Reverse Words in a String III
    14. Longest Common Prefix
    linux 修改系统时间 同步网络时间
    Django学习
    mysql操作
    mysql ,shell代码
    mysql学习
    Mac环境下mysql安装以及登录
    Mac自带Apache服务器的使用
    MongoDB连接数据库
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4904669.html
Copyright © 2011-2022 走看看