Angular7：服务

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

  为了创建服务，我们需要使用下面给出的命令行

ng g service myservice
C:\projectA7\angular7-app>ng g service myservice 
CREATE src/app/myservice.service.spec.ts (348 bytes) 
CREATE src/app/myservice.service.ts (138 bytes)

  应用程序文件夹中创建的文件如下：

  下面是创建的文件：my service . service . specs . ts和myservice.service.ts。

myservice.service.ts

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root' 
}) 
export class MyserviceService {
   constructor() { }
}

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

  在创建新服务之前，我们需要包含在主父app.module.ts中创建的服务。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

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

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

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

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
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 7 Project!'; 
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

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

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

app.component.html

{{todaydate}} 
<app-new-cmp></app-new-cmp>

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

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

  在我们创建的新组件中，我们需要首先导入我们想要的服务，并访问其方法和属性。检查高亮显示的代码。今天的数据显示在组件html中，如下所示:

new-cmp.component.html

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

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

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

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

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

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
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 7 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”，我们将在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 { 
   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也会显示相同的内容。

  在更改之前，还要检查控制台中的值。

  这是app.component.html和new-cmp.component.html文件。

app.component.html

<h3>{{todaydate}}>/h3> 
<h3> Service Property : {{componentproperty}} </h3> 
<app-new-cmp></app-new-cmp>

new-cmp.component.html

<h3>{{newcomponent}} </h3> 
<h3> Service Property : {{newcomponentproperty}} </h3> 
<h3> Today's Date : {{todaydate}} </h3>