angular2的服务

xiaoxiao2021-02-28  87

学习总结,如有不恰当描述,请大神们评论告诉我,让我学习的更全面,更准确。

angular2的服务(service),很多人会联想到后台的service层,其实二者很相似,angular2的服务是指那些能够被其它的组件或者指令调用的单一的,可共享的代码块.服务能够使我们提高代码的利用率,方便组件之间共享数据和方法,方便测试和维护..

接下来,让我们看看我写的例子:

这是我的目录结构:

user.ts代码

export class User{ id: string; name: string; } ts中,不写权限修饰符默认public和java一样!

user-date.ts

import {User} from "./user"; export const Users:User[]=[ {id:'1',name:'张三'}, {id:'2',name:'李四'}, {id:'3',name:'王五'}, {id:'4',name:'赵六'}, {id:'5',name:'钱七'} ];因为没有http,先自己造数据!

user-service.ts

import {User} from "./user"; import {Users} from "./user-date"; /*服务,提供公共常用的方法代码*/ export class UserService{ getUser():Promise<User[]>{ return Promise.resolve(Users); } }promise是承诺,是防止异步传输数据出现不同步的问题。

app.component.ts

import {Component, OnInit} from '@angular/core'; import {UserService} from "./user-service"; import {User} from "./user"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers:[UserService] }) export class AppComponent implements OnInit{ users:User[]; constructor(private userService:UserService){ } getUserDate(){ this.userService.getUser().then( users => this.users = users ) } ngOnInit(){ this.getUserDate(); } }

使用服务,在@Component中要写提供商providers:[UserService]!

oninit接口是组建生命周期钩子!

接口方法有很多,我们使用其中的ngOnInit(){};就是在页面组建渲染的时候,调用实现ngOnInit()方法。给angular2页面赋初值。不然方法都只能在发生事件的时候才能调用!

app.component.ts

<h1>angular-service</h1> <ul> <li *ngFor="let user of users"> {{user.name}} </li> </ul>*ngFor 是angular2自带的内置循环遍历指令:

npm run start

效果图:

有哪里描述不准确的希望浏览者可以提出来,大家一起学习!我也正在angular2学习的路上!

转载请注明原文地址: https://www.6miu.com/read-96787.html

最新回复(0)