Angular学习笔记第五章——服务

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()中调用该方法，即可取得数据。

效果如下：