转自:https://segmentfault.com/a/1190000010700308

有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可以使用的服务,管道与指令。一个小问题就是服务,通常应该作为单例的服务可能会被多次提供。幸运的是,对于我们来说,通过在共享模块中定义一个返回ModuleWithProviders对象的静态方法forRoot,就可以轻松解决这个问题。

这是一个示例的实现,首先是我们定义的共享模块

//: ./shared/shared.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';

import { MyDirective } from './my.directive';
import { FunPipe } from './fun.pipe';
import { SomeService } from './some.service'; @NgModule({
declarations: [
FunPipe,
MyDirective
],
exports: [
FunPipe,
MyDirective
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule:SharedModule,
providers:[ SomeService ]
};
}
}

注意,我们如何在NgModule的元数据中像往常一样声明和导出我们的管道和指令,但是我们不提供服务。相反,我们在模块的类中定义一个静态方法forRoot,该方法返回一个实现 Angular 的 ModuleWithProviders 接口的对象。

现在,在我们的应用模块中,我们可以导入共享模块并调用forRoot静态方法来提供我们的服务:

//: app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SharedModule.forRoot()
],
bootstrap: [
AppComponent
]
})
export class AppModule {}

你可能会注意到,你曾经在导入RouterModule模块并在应用程序中调用了静态方法forRoot时看到了这一点。

最后,在任何功能模块中我们可以简单地导入没有forRoot的共享模块,同时我们可以访问共享管道和指令,而不再提供服务:

//: some-feature.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { SharedModule } from '../shared/shared.module'; //... @NgModule({
imports: [
CommonModule,
SharedModule
],
declarations: [
//...
]
})
export class SomeFeatureModule {}

就是如此简单!一个简单的小技巧,使它更容易使用共享模块和 lazy-loaded 模块。

在Angular中定义共享的Providers的更多相关文章

  1. VB.NET在基类中定义共享事件(类似于C#中的静态事件)

    基类: Public Class userFun Private Shared _PnlStatus As String ‘必须设为共享字段,如果不设为Shared,将不能传递字符串内容 Public ...

  2. angular中定义全局变量及全局变量的使用

    一个例子,定义了两个变量,并且把变量显示出来: <!DOCTYPE html> <html ng-app="myApp"> <head> < ...

  3. 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员

    提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...

  4. Angular中Constructor 和 ngOnInit 的本质区别

    在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...

  5. angular中控制器之间传递参数的方式

    在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...

  6. angular中的compile和link函数

    angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...

  7. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

  8. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  9. angular源码分析:angular中$rootscope的实现——scope的一生

    在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...

随机推荐

  1. onethink----网站配置信息调用!

    {:C('WEB_SITE_TITLE')} // 标题 {:C('WEB_SITE_DESCRIPTION')} // 描述 {:C('WEB_SITE_KEYWORD')} // 关键词 {:C( ...

  2. 解决Android版Firefox字体显示过大的问题

    在用Android版Firefox查看博客园首页发现中间区域的字体显示非常大,开始以为是首页css对移动版浏览器支持不好. 后来发现原来这是Firefox for Android的知名bug: Tha ...

  3. MTA---smtp(25,postfix,sendmail),Pop3(110,Devocot), MUA(foxmail) IMAP(server,client rsync)

    利用telnet进行SMTP的验证 =========先计算BASE64编码的用户名密码,认证登录需要用到=========== [crazywill@localhost crazywill]$ pe ...

  4. Drawing Graphs using Dot and Graphviz

    Drawing Graphs using Dot and Graphviz Table of Contents 1. License 2. Introduction 2.1. What is DOT? ...

  5. 使用Ajax向服务器端发送请求

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 5.7 Components — Sending Actions From Components to Your Application

    一.概述 1. 当一个组件在模板中被使用时,它具有发送action到这个模板的controller和routes的能力.当重大事件发生的时候,这些允许组件通知application,比如点击组件一个特 ...

  7. Codeforces Round #265 (Div. 2) E

    这题说的是给了数字的字符串 然后有n种的操作没次将一个数字替换成另一个字符串,求出最后形成的字符串的 数字是多大,我们可以逆向的将每个数推出来,计算出他的值和位数记住位数用10的k次方来记 1位就是1 ...

  8. 梅尔频率倒谱系数(MFCC) 学习笔记

    最近学习音乐自动标注的过程中,看到了有关使用MFCC提取音频特征的内容,特地在网上找到资料,学习了一下相关内容.此笔记大部分内容摘自博文 http://blog.csdn.net/zouxy09/ar ...

  9. redis入门学习记录(一)

    1.linux在线下载Redis ,官网地址:https://redis.io/download目前,最新的Redist版本为redis-5.0.0,使用wget下载 进入/usr/local/src ...

  10. CentOS7搭建Gitlab详细过程

    1.参见Gitlab官网说明 原文地址:https://about.gitlab.com/install/#centos-7   1.安装并配置必要的依赖项 在CentOS 7(和RedHat / O ...