Angular Service(服务)

划水的害虫 發表於 2020-1-28 21:25:00

官方认为组件不应该直接获取或保存数据，它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。而服务就充当着数据访问，逻辑处理的功能。把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，可以让组件类更加精简、高效，这是官方的一些定义。非常认同，以我粗鄙的个人开发经验来看，现实开发中并不能完全的把组件和服务区分开来。并没有做到为组件提供专门的服务，或者说把逻辑处理都放在服务，组件只展示数据。一个模块通常有许多组件，我们的每个业务模块中只存在一个服务，将模块中的数据访问，数据处理判断，通用的方法放在服务中而已。组件中还是会有一些数据的判断，页面的展示逻辑等。当然我们也有服务提供给各个组件使用，一些通用的服务比如 httpService logService uiServic 等等。可能我说的是针对于业务上等服务无法完全剥离吧。 
<h3>1.依赖注入</h3>
<ul>
<li>
注入器是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。

</li>
<li>
该注入器会创建依赖、维护一个容器来管理这些依赖，并尽可能复用它们。

</li>
<li>
提供商是一个对象，用来告诉注入器应该如何获取或创建依赖。

</li>

</ul>
<h3 id="providers">2.服务提供商</h3>
     我们使用命令ng g s servicename创建一个服务，在新建的服务中我们可以看到@Injectable()装饰器，它把这个类标记为依赖注入系统的参与者之一。组件中如何使用服务呢，必须将服务依赖注入系统、组件或者模块，才能够使用服务。我们可以用注册提供商和根注入器实现。
      该服务本身是 CLI 创建的一个类，并且加上了 <code>@Injectable()</code> 装饰器。默认情况下，该装饰器是用 <code>providedIn</code> 属性进行配置的，它会为该服务创建一个提供商。在这个例子中，<code>providedIn: 'root'</code> 指定 Angular 应该在根注入器中提供该服务,从而实现根注入器将服务注入，它就在整个应用程序中可用了。
testService.ts
<div class="cnblogs_code">
<pre>import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root',
})
export class TestService {
}</pre>
</div>
也可以指定某个服务只有在特定的模块中提供，类似于一个业务模块中专属于这个模块的服务，只会应用于此模块中，我们就可以这么做。
<div class="cnblogs_code">
<pre>import { Injectable } from '@angular/core';
import { TestModule } from './test.module';

@Injectable({
providedIn: TestModule,
})
export class TestService {
}</pre>
</div>
or
<div class="cnblogs_code">
<pre>import { NgModule } from '@angular/core';
import { TestService } from './test.service';

@NgModule({
providers: ,
})
export class TestModule {
}</pre>
</div>
也可以直接在某个组件中注入服务。
<div class="cnblogs_code">
<pre>@Component({
/* . . . */
providers:
})</pre>
</div>
<h3>3.服务的作用域</h3>
        为什么一个服务而已，有多种注入的方法有什么区别吗，有。这就在于这个服务作用于哪里，用于限定服务使用的界限。当我们将某个服务根注入意味着在整个应用中都可以使用，注入于某个模块，只能应用于某个模块，注入于组件中，只应用于此组件。我们根据对服务的功能定义，来选择合适的注入方式，以提高性能。
<h3>4.单例服务</h3>
提供单例服务的方法：
<ul>
<li>
把 <code>@Injectable()</code> 的 <code>providedIn</code> 属性声明为 <code>root</code>。
</li>
</ul>
<div class="cnblogs_code">
<pre>import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class TestService {
}</pre>
</div>
<ul>
<li>
把该服务包含在 <code>AppModule</code> 或某个只会被 <code>AppModule</code> 导入的模块中。
</li>
</ul>
<div class="cnblogs_code">
<pre>@NgModule({
...
providers: ,
...
})</pre>
</div>
forRoot() 模式
     如果模块同时定义了 providers (服务)，当你在多个特性模块中加载此模块时，这些服务就会被注册在多个地方。这会导致出现多个服务实例，并且该服务的行为不再像单例一样 。有多种方式来防止这种现象：
<ul>
<li>用 providedIn 语法代替在模块中注册服务的方式。</li>
<li>把你的服务分离到它们自己的模块中。</li>
<li>在模块中分别定义 forRoot() 和 forChild() 方法。</li>
</ul>
 使用 forRoot() 来把提供商从该模块中分离出去，这样你就能在根模块中导入该模块时带上 providers ，并且在子模块中导入它时不带 providers。
ps: <code>RouterModule</code> 没有 <code>forRoot()</code>
<pre>GreetingModule.ts</pre>
<div class="cnblogs_code">
<pre>static forRoot(config: TestServiceConfig): ModuleWithProviders {
return {
ngModule: GreetingModule,
providers: [
 {provide: TestServiceConfig, useValue: config }
]
};
}</pre>
</div>
导入 GreetingModule，并只在 AppModule 中调用一次它的 forRoot() 方法。像这样注册它一次就可以防止出现多个实例。
<div class="cnblogs_code">
<pre>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

/* App Root */
import { AppComponent } from './app.component';

/* Feature Modules */
import { ContactModule } from './contact/contact.module';
import { GreetingModule } from './greeting/greeting.module';

/* Routing Module */
import { AppRoutingModule } from './app-routing.module';

@NgModule({
imports: [
BrowserModule,
ContactModule,
GreetingModule.forRoot({userName: 'Miss Marple'}),
AppRoutingModule
],
declarations: [
AppComponent
],
bootstrap:
})
export class AppModule { }</pre>
</div>
工作原理：
在 <code>GreetingModule.ts</code> 中,我们可以看到，添加一个用于配置 <code>UserService</code> 的 <code>forRoot()</code> 方法,可选的注入 Test<code>ServiceConfig</code> 扩展了 Test<code>Service</code>。如果 Test<code>ServiceConfig</code> 存在，就从这个配置中设置用户名。
test.service.ts (constructor)
<div class="cnblogs_code">
<pre>content_copyconstructor(@Optional() config: Test<code>ServiceConfig</code>) {
if (config) { this._userName = config.userName; }
}</pre>
</div>
如何有效的防止重复导入：
只有根模块 AppModule 才能导入 GreetingModule。如果一个惰性加载模块也导入了它，该应用就会为服务生成多个实例。
为 <code>GreetingModule</code> 添加构造函数，该构造函数要求 Angular 把 GreetingModule 注入它自己。如果 Angular 在当前注入器中查找 GreetingModule，这次注入就会导致死循环，但是 @SkipSelf() 装饰器的意思是 "在注入器树中层次高于我的祖先注入器中查找 GreetingModule。"，能有效的防止重复的导入。
greeting.module.ts
<div class="cnblogs_code">
<pre>import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GreetingComponent } from './greeting.component';
import { UserServiceConfig } from './user.service';

@NgModule({
imports: [ CommonModule ],
declarations: [ GreetingComponent ],
exports: [ GreetingComponent ]
})
export class GreetingModule {
constructor (@Optional() @SkipSelf() parentModule: GreetingModule) {
if (parentModule) {
 throw new Error(
 'GreetingModule is already loaded. Import it in the AppModule only');
}
}

static forRoot(config: UserServiceConfig): ModuleWithProviders {
return {
 ngModule: GreetingModule,
 providers: [
 {provide: UserServiceConfig, useValue: config }
 ]
};
}
}</pre>
</div>
 
此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。 
来源：https://www.cnblogs.com/huangenai/p/12214806.html

頁: [1]

琼殿技术论坛's Archiver

Angular Service(服务)