Angular 4 服务

  在本章中，我们将讨论Angular 4中的服务。

  我们可能会遇到这样的情况:我们需要在页面上的任何地方使用一些代码。它可以用于需要跨组件共享的数据连接等等。服务有助于我们实现这一目标。通过服务，我们可以访问整个项目中其他组件的方法和属性。

  要创建服务，我们需要使用命令行。同样的命令是：

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>

   这些文件在app文件夹中创建，如下所示：

  以下是被新创建出来的文件：myservice.service.specs.ts和myservice.service.ts

myservice.service.ts

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

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

  这里，Injectable模块是从@angular/core导入的。它包含@Injectable方法和一个名为MyserviceService的类。我们将在此类中创建我们的服务功能。

  在创建新服务之前，我们需要包括在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 { }

  我们已经导入了具有类名的服务，并且在提供者中使用了相同的类。现在让我们切换回服务类，创建一个服务函数。

  在服务类中，我们将创建一个显示今天日期的函数。我们可以在app.component.ts 中使用相同的功能，也可以在上一章创建的new-cmp.component.ts中使用相同的功能。

  现在让我们看看函数在服务中的外观，以及如何在组件中使用它。

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

  在上面的服务文件中，我们创建了一个showtodayDate函数。现在，我们将返回new Date () 。让我们看看如何在组件类中访问这个函数。

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

  默认情况下，在创建的任何组件中都会调用ngOnInit函数。如上所示，从服务中提取日期。要获取服务的更多细节，我们需要首先将服务包含在组件ts文件中。

  我们将在.html文件中显示日期，文件内容如下所示:

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

  现在让我们看看如何在创建的新组件中使用服务。

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

  在我们创建的新组件中，我们需要首先导入我们想要的服务，并访问它的方法和属性。请查看突出显示的代码。今天的日期显示在组件html中，如下所示

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

  新组件的选择器用于app.component.html文件。上述html文件中的内容将显示在浏览器中，如下所示

  如果您在任何组件中更改了服务的属性，其他组件也将更改同样的属性。现在让我们看看这是如何工作的。

  我们将在服务中定义一个变量，并在父组件和新组件中使用它。我们将再次更改父组件中的属性，并查看是否在新组件中更改了相同的属性。

  在myservice.service.ts中，我们创建了一个属性，并在其他父组件和新组件中使用了相同的属性。

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

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

  现在让我们在其他组件中使用serviceproperty变量。在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;
   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;
   }
}

  现在，我们将获取变量并在console.log上运行。在下一行中，我们将变量的值更改为“component created”。我们将在ew-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;
   }
}

  在上面的组件中，除了直接将属性分配给组件属性，我们没有改变任何东西。

  现在，当你在浏览器中执行它时，服务属性将会改变，因为它的值会在app.component.ts中改变，而new-cmp.component.ts也会显示同样的内容