Service trong Angular 4

Trong chương giới thiệu về các thành phần trong Angular 4, chúng ta có nhắc đến service.

Có một số tình huống mà chúng ta cần sử dụng một số đoạn code ở nhiều trang khác nhau ví dụ như chia sẻ dữ liệu giữa các component với nhau. Để làm được điều này, chúng ta có thể sử dụng service. Với service, chúng ta có thể truy cập các phương thức, thuộc tính của các component trong cả project.

Tạo service

Để tạo service, ta chạy câu lệnh sau trên màn hình command line
ng g service myservice

Sau khi chạy xong, ta có thêm 2 file nữa trong project là myservice.service.tsmyservice.service.spect.ts

Trong file service, ta thấy nội dung

myservice.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor() { }
}

Đây là một Injectable module (hiểu đơn giản là module có thể mang vào sử dụng trong module khác - cơ chế Dependency Injection)

Khai báo service

Để sử dụng myservice service, chúng ta cần khai báo trong app.module.ts

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

// Import myservice
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    ChangeTextDirective,
    SqrtPipe
  ],
  imports: [
    BrowserModule
    ,
    RouterModule.forRoot([
      {
        path: 'new-cmp',
        component: NewCmpComponent
      }
    ])],
    // Khai báo myservice service
  providers: [MyserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Chúng ta thay đổi nội dung của myservice: thêm hàm getTodayDate() để lấy ra ngày hôm nay như sau:

myservice.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor() { }

  getTodayDate() {
    let ndate = new Date();
    return ndate;
  }
}

Sử dụng service

Để sử dụng service, ta cần thực hiện 2 bước:

Bước 1: Thay đổi constructor - thêm service vào component bằng cách khai báo như parameter.

Bước 2: Gọi service trong hàm tạo.

Cùng đi vào ví dụ sử dụng service trên trong app component và new cmp component.

Sử dụng service trong app component

Bước 1: Thay đổi constructor, thêm service

app.component.ts
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.getTodayDate();
   }
}

Trong constructor ta khai báo private myservice: MyserviceService

Trong hàm khởi tạo ngOnInit, ta gọi service qua lời gọi this.myservice.getTodayDate() sau đó gán dữ liệu vào biến todaydate

Tiếp đó, ta sửa nội dung file app.component.html để hiển thị dữ liệu ra view

app.component.html
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<h3>Dữ liệu todaydate ở App Component: {{todaydate}}</h3>

<br />
<br />
<br />
<a routerLink = "new-cmp">Click vào đây để hiển thị New Component</a>

<router-outlet></router-outlet>

Ta nhận được kết quả như hình dưới

Kết quả hiển thị sau khi gọi service

Sử dụng service trong new cmp component

Tương tự sử dụng trong app component, ta lần lượt sửa nội dung 2 file: new-cmp.component.tsnew-cmp.component.html

new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
import {MyserviceService} from './../myservice.service'

@Component({
  selector: 'app-new-cmp',
  templateUrl: './new-cmp.component.html',
  styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {

  todo = ["Học TypeScript", "Học Angular 4", "Học HTML5"]; 
  todaydate;
 
  constructor(private myservice: MyserviceService) { }

  ngOnInit() {
    this.todaydate = this.myservice.getTodayDate();
  }

}

new-cmp.component.html
<h3>Dữ liệu load từ new cmp component: {{todaydate}}</h3>
<p>Danh sách các công việc cần làm</p>
<ul>
    <li *ngFor="let cv of todo">{{cv}}</li>
</ul>
<h3>Today date load ở new component: {{todaydate}}</h3>

Ta được kết quả như hình

Kết quả hiển thị khi gọi service từ new cmp service

Thuộc tính của service

Ngoài khả năng chứa các hàm thì service cũng có thể chứa các thuộc tính. Trong ví dụ dưới đây, chúng ta sẽ thêm thuộc tính myProperty trong myService và hiển thị chúng trên cả App ComponentNew Cmp Component

myservice.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  // Thêm thuộc tính myProperty cho service
  myProperty;
  constructor() { }

  getTodayDate() {
    let ndate = new Date();
    return ndate;
  }
}

Tiếp đó sửa nội dung của app.component.tsapp.component.html để hiển thị thử nội dung thuộc tính của service

app.component.ts
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'Angular 4 Project!';
    todaydate;
    // Khai báo biến để lấy dữ liệu từ thuộc tính của service
    propertyService;
    constructor(private myservice: MyserviceService) { }
    ngOnInit() {
        this.todaydate = this.myservice.getTodayDate();
        // Thay đổi giá trị thuộc tính của service
        this.myservice.myProperty = "myProperty: App Component";
        // Lấy giá trị thuộc tính của service ra 
        this.propertyService = this.myservice.myProperty;
    }
}

app.component.html
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<h3>Dữ liệu todaydate ở App Component: {{todaydate}}</h3>
<h3>Property service: {{propertyService}}</h3>

<br />
<br />
<br />
<a routerLink = "new-cmp">Click vào đây để hiển thị New Component</a>

<router-outlet></router-outlet>

Sửa nội dung của new-cmp.component.tsnew-cmp.component.html để hiển thị nội dung thuộc tính của service

new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
import {MyserviceService} from './../myservice.service'

@Component({
  selector: 'app-new-cmp',
  templateUrl: './new-cmp.component.html',
  styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {

  todo = ["Học TypeScript", "Học Angular 4", "Học HTML5"]; 
  todaydate;
  propertyService;
 
  constructor(private myservice: MyserviceService) { }

  ngOnInit() {
    this.todaydate = this.myservice.getTodayDate();
    this.myservice.myProperty = "myProperty: New Cmp Component";
    this.propertyService = this.myservice.myProperty;
  }

}

new-cmp.component.html
<h3>Dữ liệu load từ new cmp component: {{todaydate}}</h3>
<p>Danh sách các công việc cần làm</p>
<ul>
    <li *ngFor="let cv of todo">{{cv}}</li>
</ul>
<h3>Today date load ở new component: {{todaydate}}</h3>
<h3>Property service: {{propertyService}}</h3>

Ta được kết quả như hình

Kết quả hiển thị thuộc  tính của service

Nội dung bài service trong Angular 4 đến đây là hết rồi. Hẹn gặp lại các bạn trong bài sau nhé.

Khóa học Angular 1x kết hợp với PHP và MySQL rất hay

Nếu bạn đang tìm hiểu Angular 1x + PHP/MySQL thì hãy tham khảo khóa học tạo ứng dụng Angular này, đây là khóa học được biên soạn bởi anh Việt, giảng viên tại fedu.vn. Trong khóa học này bạn sẽ được hướng dẫn sử dụng Angular 1  để hiển thi dữ liệu được trả về từ Server (PHP và MySQL).

-------------------#####-------------------

-------------------#####-------------------

Nguồn: freetuts.net