Tìm hiểu Services trong Angular 7

Chúng ta có thể gặp một tình huống mà chúng ta cần một số mã để sử dụng ở mọi nơi trên trang. Ví dụ, nó có thể dành cho kết nối dữ liệu cần được chia sẻ giữa các component. Điều này đạt được với sự trợ giúp của Services. Với các service trong angular, chúng ta có thể truy cập các phương thức và thuộc tính trên các thành phần khác trong toàn bộ dự án.

Tạo service trong Angular với cú pháp như sau:

ng g service myservice

Chúng ta tạo được 2 file như sau myservice.service.specs.ts and myservice.service.ts.

myservice.service.ts

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

@Injectable({

   providedIn: 'root' 

}) 

export class MyserviceService {

   constructor() { }

}

Tiếp theo chúng ta import service trong app.module ở providers

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { ChangeTextDirective } from './change-text.directive';

import { AppRoutingModule, RoutingComponet } from './app-routing.module';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

import { MyServiceService } from './service/my-service.service';

@NgModule({

  declarations: [

    AppComponent,

    ChangeTextDirective,

    HomeComponent,

    AboutComponent,

    RoutingComponet

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [MyServiceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

Chúng ta đi tìm hiểu service trong angular như thế nào và xem các chức năng của service. Trong class service chúng ta tạo một hàm hiện thì ngày hôm nay(today date) chúng ta cần hiện thị ở component parent và đồng thời cũng hiện thị ở component childrent.

Trong class service chúng ta tạo một hàm showdate() và trả về giá trị date như sau:

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

@Injectable({

  providedIn: 'root'

})

export class MyServiceService {

  constructor() { }

  showTodate(){

    let date= new Date();

    return date;

  }

}

Để sử dụng chung được những tính năng service của angular bạn có thể khởi tạo một contrucstor. tiếp theo bạn tạo một component mới trong angular như sau

ng g c home/newHome

Trong newHome.component.html

<h1>New Home</h1>

<p>{{toDate}}</p>

newHome.component.ts

import { Component, OnInit } from '@angular/core';

import { MyServiceService } from 'src/app/service/my-service.service';

@Component({

  selector: 'app-new-home',

  templateUrl: './new-home.component.html',

  styleUrls: ['./new-home.component.css']

})

export class NewHomeComponent implements OnInit {

  private toDate;

  constructor(private myService:MyServiceService ) { }

  ngOnInit(): void {

    this.toDate = this.myService.showTodate();

  }

}