在Angular中使用Service

Service不仅仅是数据获取模块，同时也是非常简单容易的数据共享模块。

下面是是一个Service的定义：

board.service.ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

providedIn: 'root'

})

export class BoardService {

constructor(private http: HttpClient) { }

backlog = [];

todo = [

'Task 1',

'Task 2',

'Task 3'

];

inProgess = [

'Task 4',

'Task 5',

];

done = [

'Task 6',

'Task 7',

'Task 8',

'Task 9'

];

boards = [

{id: 1, name: "Board 1"},

{id: 2, name: "Board 2"},

{id: 3, name: "Board 3"},

];

checkInvalidName(name: string): boolean {

if(this.todo.findIndex(x=>x.toLowerCase() == name.toLowerCase()) != -1){

return true;

}

if(this.inProgess.findIndex(x=>x.toLowerCase() == name.toLowerCase()) != -1){

return true;

}

if(this.done.findIndex(x=>x.toLowerCase() == name.toLowerCase()) != -1){

return true;

}

return false;

}

checkInvalidBoardName(name: string): boolean {

if(this.boards.findIndex(x=>x.name.toLowerCase() == name.toLowerCase()) != -1){

return true;

}

return false;

}

addBoard(name: string) {

return  this.http.post('/api/board', { name: name });

}

addTask(boardId: number, name: string) {

return  this.http.post('/api/task', { boardId: boardId, name: name });

}

getBoards() {

return  this.http.get('/api/board');

}

}

使用例子：

export class BoardComponent extends BaseComponent implements OnInit {

constructor(public dialog: MatDialog, private boardService: BoardService) {

super();

}

ngOnInit(): void {

this.backlog = this.boardService.backlog;

this.todo = this.boardService.todo;

this.inProgess = this.boardService.inProgess;

this.done = this.boardService.done;

this.subspritions.push(this.boardService.getBoards().subscribe(x=>{

this.boards = x;

if(this.boards.length > 0) {

this.currentBoardId = this.boards[0].id;

this.currentBoard = this.boards[0];

}

}));

} ...

可以在多个组件中使用：

export class AddBoardComponent {

constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef,private boardService: BoardService) {

}

private isInvalidName = false;

closeDialogOk() {

// check unique

this.isInvalidName = this.boardService.checkInvalidBoardName(this.data.name);

if(this.isInvalidName) {

return;

}

this.dialogRef.close(this.data.name);

}

...

Angular

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。