[Angular] Configurable NgModules
You probably have seen 'foorRoot()' method a lot inside Angular application.
Creating a configurable NgModule allows us do the configuration for each serivce.
// service module import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http'; import { FOOD_STORE_CONFIG, FoodStoreConfig } from './config';
import { FoodStoreService } from './food-store.service'; export const FOOD_PROVIDERS: Provider[] = [
FoodStoreService
]; @NgModule({
imports: [
CommonModule,
HttpModule
]
})
export class FoodStoreModule {
static forRoot(config: FoodStoreConfig): ModuleWithProviders {
return {
ngModule: FoodStoreModule,
providers: [
...FOOD_PROVIDERS,
{
provide: FOOD_STORE_CONFIG,
useValue: config
}
]
};
}
}
import { InjectionToken } from '@angular/core'; export interface FoodStoreConfig {
storeId: number,
storeToken: string
} export const FOOD_STORE_CONFIG = new InjectionToken<FoodStoreConfig>('FOOD_STORE_CONFIG');
Then in the app.module.ts:
imports: [
BrowserModule,
HttpModule,
FoodStoreModule.forRoot({
storeId: ,
storeToken: 'eca938c99a0e9ff91029dc'
})
],
Now the 'FoodStoreService' can be used any where inside our application:
// app.component.ts @Component({
selector: 'app-root',
template: `
<div>
Food Store ({{ (store | async)?.name }})
</div>
`
})
export class AppComponent {
store = this.foodService.getStore();
constructor(private foodService: FoodStoreService) {}
}
[Angular] Configurable NgModules的更多相关文章
- [Angular] Configurable Angular Components - Content Projection and Input Templates
We are going to have a modal component: <au-modal > </au-modal> And we can pass default ...
- 史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- Angular之Providers (Value, Factory, Service and Constant )
官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
- Angular学习笔记(一)
本文为原创文章,转载请标明出处 目录 架构 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 模板与数据绑定 1. 架构 模块 Angular 应用是模块化的,并且 Angular 有自己的模 ...
- AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...
- Angular开发技巧
由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...
- Translate Angular >=4 with ngx-translate and multiple modules
原文:https://medium.com/@lopesgon/translate-angular-4-with-ngx-translate-and-multiple-modules-7d9f0252 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
随机推荐
- cogs P1578【模板】 次小生成树初级练习题
1578. 次小生成树初级练习题 ☆ 输入文件:mst2.in 输出文件:mst2.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 求严格次小生成树 [输入格式 ...
- js29--装饰着模式
//装饰者模式:就是在保证不改变原有对象的基础上,去扩展一些想要的方法或去求 var CarInterface = new BH.Interface('CarInterface' , ['getPri ...
- thinkphp5空控制器和空操作
thinkphp5空控制器和空操作 一.总结 1.空控制器和空操作用:空控制器和空操作都是为了防止网站上的用户恶意输入,网站上线的话必须加上, 2.空操作:空操作就是在一般的控制器里面加上一个 _em ...
- 21. Node.Js Buffer类(缓冲区)-(一)
转自:https://blog.csdn.net/u011127019/article/details/52512242
- c#的中英文混合字符串截取 public static string SubString(string inputString, int byteLength)
/// <summary> /// c#的中英文混合字符串截取(区分中英文) /// </summary> /// <param ...
- BZOJ2754: [SCOI2012]喵星球上的点名(AC自动机/后缀自动机)
Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣. 假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...
- Office2010激活工具
mini-KMS Activator是一款好用Office2010激活工具,“KMS”是微软对于“大客户”(VOL或VL)提供的Microsoft产品激活方式之一.在适用此方式的Microsoft产品 ...
- <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B
<link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...
- LinearLayout-layout_gravity 属性没有效果分析
今天在一个布局文件中,遇到了一个问题,先看代码 <LinearLayout android:layout_width="match_parent" android:layou ...
- html只能有一个id,并且id的值只能是一个
1.如果有相同的ID,javascript只会取第一个具有该ID的标签. 2.如果id值有两个,JS只会取到第一个,并不会像class类一样,类名并列就可以同时取到.