Angular 6 - 服务

---

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

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

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

C:\projectA6\Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 bytes)
CREATE src/app/myservice.service.ts (138 bytes)

这些文件在应用程序文件夹中创建，如下所示 -

以下是在底部创建的文件 - 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 { }

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

在服务类中，我们将创建一个今天显示的函数