Angular学习笔记五–服务
1.创建新组建
创建用户详细组件,用于逻辑拆分:
ng generate component user-detail
将原本的用户详情部分的代码移到user-detail.component.html中:
<div *ngIf="user">
<div>
<span>id:</span>{{user.id}}
</div>
<label>
name:
<input [(ngModel)]="user.name">
</label>
</div>
user属性必须是一个带有@Input()装饰器的输入属性,作用是外部的UsersComponent组件可以通过它绑定到该组件。
user-detail.component.ts:
import { Component, Input, OnInit } from '@angular/core';
import { User } from '../../model/user';
@Component({
selector: 'app-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
@Input() user: User = new User;
constructor() { }
ngOnInit(): void {
}
}
UserDetailComponent组件的选择器是app-user-detail,所以,可以通过它将该组件绑定到users.component.html:
<div>
<h2>我的用户</h2>
<ul class="users">
<li *ngFor="let user of users" (click)="onSelect(user)">
<span class="badge">{{user.id}}</span>{{user.name}}
</li>
</ul>
</div>
<h2>{{selectUser.name}}</h2>
<app-user-detail [user]="selectUser"></app-user-detail>
users.component.ts:
import { Component, OnInit } from '@angular/core';
import { User } from '../../model/user';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
selectUser: User = new User();
users: User[] = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' },
{ id: 5, name: '田七' },
{ id: 6, name: '杜八' }
];
constructor() { }
ngOnInit(): void {
}
onSelect(user: User): void {
this.selectUser = user;
}
}
通过以上拆分,可以达到和拆分前同样的效果。
2.使用服务
创建服务有以下好处:
(1)有利于代码的分层管理。
(2)依靠Angular的依赖注入机制,能够轻松地将服务注入需要使用服务的组件中,从而简化了服务的实例化。
创建user服务:
ng generate service user
创建成功的user.service.ts如下:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
}
生成的服务中第一行导入了Angular的Injectable符号,并且给这个服类添加了@Injectable()的装饰器,会接收该服务的元数据对象。
可将组件中的数据访问逻辑放入服务中。
在user.service.ts服务中定义数组,以及getUsers()方法,返回数据:
import { Injectable } from '@angular/core';
import { User } from '../model/user';
@Injectable({
providedIn: 'root'
})
export class UserService {
users: User[] = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' },
{ id: 5, name: '田七' },
{ id: 6, name: '杜八' }
];
constructor() { }
getUsers(): User[] {
return this.users;
}
}
修改users.component.ts组件:
import { Component, OnInit } from '@angular/core';
import { User } from '../../model/user';
import { UserService } from '../../Service/user.service';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
selectUser: User = new User();
users: User[] = [];
constructor(private userService: UserService) { }
ngOnInit(): void {
this.getUsers();
}
onSelect(user: User): void {
this.selectUser = user;
}
getUsers(): void {
this.users = this.userService.getUsers();
}
}
将服务注入到组件中。添加getUsers()方法调用服务中的getUsers()方法取得数据。在初始化方法ngOnInit()中调用该方法,即可取得数据。
效果如下: