Angular 4 - Dịch vụ

Trong chương này, chúng ta sẽ thảo luận về các dịch vụ trong Angular 4.

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. Nó có thể dành cho kết nối dữ liệu cần được chia sẻ giữa các thành phần, v.v. Dịch vụ giúp chúng tôi đạt được điều đó. Với các dịch vụ, 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 một dịch vụ, chúng ta cần sử dụng dòng lệnh. Lệnh tương tự là -

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

Các tệp được tạo trong thư mục ứng dụng như sau:

Sau đây là các tệp được tạo ở dưới cùng - myservice.service.specs.ts và myservice.service.ts.

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

Tại đây, mô-đun Injectable được nhập từ @angular/core. Nó chứa@Injectable phương thức và một lớp được gọi là MyserviceService. Chúng tôi sẽ tạo chức năng dịch vụ của chúng tôi trong lớp này.

Trước khi tạo một dịch vụ mới, chúng ta cần đưa dịch vụ đã tạo vào phần tử chính 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 { 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: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Chúng tôi đã nhập Dịch vụ với tên lớp và cùng một lớp được sử dụng trong các nhà cung cấp. Bây giờ chúng ta hãy chuyển trở lại lớp dịch vụ và tạo một chức năng dịch vụ.

Trong lớp dịch vụ, chúng ta sẽ tạo một hàm hiển thị ngày hôm nay. Chúng ta có thể sử dụng cùng một hàm trong thành phần chínhapp.component.ts và cả trong thành phần mới new-cmp.component.ts mà chúng tôi đã tạo trong chương trước.

Bây giờ chúng ta hãy xem hàm trông như thế nào trong dịch vụ và cách sử dụng nó trong các thành phần.

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Trong tệp dịch vụ ở trên, chúng tôi đã tạo một hàm showTodayDate. Bây giờ chúng ta sẽ trả về Date () mới được tạo. Hãy để chúng tôi xem cách chúng tôi có thể truy cập hàm này trong lớp thành phần.

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.showTodayDate();
   }
}

Các ngOnInithàm được gọi theo mặc định trong bất kỳ thành phần nào được tạo. Ngày được lấy từ dịch vụ như được hiển thị ở trên. Để tìm nạp thêm chi tiết của dịch vụ, trước tiên chúng ta cần đưa dịch vụ vào thành phầnts tập tin.

Chúng tôi sẽ hiển thị ngày trong .html tệp như hình dưới đây -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

Bây giờ chúng ta hãy xem cách sử dụng dịch vụ trong thành phần mới được tạo.

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 {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

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

Trong thành phần mới mà chúng tôi đã tạo, trước tiên chúng tôi cần nhập dịch vụ mà chúng tôi muốn và truy cập các phương thức và thuộc tính của cùng một. Vui lòng xem mã được đánh dấu. Ngày hôm nay được hiển thị trong html thành phần như sau:

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

Bộ chọn của thành phần mới được sử dụng trong app.component.htmltập tin. Nội dung từ tệp html trên sẽ được hiển thị trong trình duyệt như hình dưới đây:

Nếu bạn thay đổi thuộc tính của dịch vụ trong bất kỳ thành phần nào, thì các thành phần khác cũng thay đổi như vậy. Bây giờ chúng ta hãy xem nó hoạt động như thế nào.

Chúng tôi sẽ xác định một biến trong dịch vụ và sử dụng nó trong thành phần cha và thành phần mới. Chúng tôi sẽ lại thay đổi thuộc tính trong thành phần mẹ và sẽ xem liệu điều tương tự có được thay đổi trong thành phần mới hay không.

Trong myservice.service.ts, chúng tôi đã tạo một thuộc tính và sử dụng cùng một thuộc tính trong thành phần chính và mới khác.

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Bây giờ chúng ta hãy sử dụng servicepropertybiến trong các thành phần khác. Trongapp.component.ts, chúng tôi đang truy cập biến như sau:

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;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

Bây giờ chúng ta sẽ tìm nạp biến và làm việc trên console.log. Trong dòng tiếp theo, chúng tôi sẽ thay đổi giá trị của biến thành “component created”. Chúng tôi sẽ làm như vậy trongnew-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 {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

Trong thành phần trên, chúng tôi không thay đổi bất cứ điều gì ngoài việc gán trực tiếp thuộc tính cho thuộc tính thành phần.

Bây giờ khi bạn thực thi nó trong trình duyệt, thuộc tính dịch vụ sẽ được thay đổi vì giá trị của nó được thay đổi trong app.component.ts và điều tương tự sẽ được hiển thị cho new-cmp.component.ts.

Đồng thời kiểm tra giá trị trong bảng điều khiển trước khi nó được thay đổi.