angular4实战（3） 插件引入及封装

@types

angular4 默认开发语言是typescript，虽然typescript作为js语言的超集，但是项目默认还是不支持直接使用js脚本的。再引入使用js脚本之前，需要事先引入对应的类型声明文件（xx.d.ts），类似于c中的.h头文件。

本项目中的提醒插件使用了noty，它本身作为一款JS插件，其内部也是支持了typescript的引入的。



当插件本身已经存在了声明文件时，就可以在项目中去使用它了，但是直接引入，typescript还是不认得。

如:



此时两种解决方案。

方案一：

将import Noty from 'noty'改为import * as Noty from 'noty';

方案二：

在tsconfig.json中的compilerOptions下添加配置

"allowJs": true,
"allowSyntheticDefaultImports": true,

服务封装

组件中服务的引用依赖于providers，先向providers做注入，才可以在组件类中去使用。

而服务本身的封装，也需要去Injectable，才可以向providers中提供。

模块共享

这边主要提到的一点是，当切换到stones模块下面时，之前在app.component下声明的各种服务，不会生效，需要在stones模块下重新去挂载，这样是非常麻烦的，因此，在实际项目中，会将那些公用的服务，例如提醒服务，国际化服务（本项目使用了ngx-translate做国际化，ngx-translate在网上的教程比较详尽，不做赘述）。都统一封装在共享的模块下，然后去挂载共享模块。例如项目中有如下内容，需要分发到每个模块。

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {TranslateModule} from '@ngx-translate/core';
import {NotyService} from '../service/noty/noty.service';
import {MaterialModule} from '@angular/material';
import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
declarations: [],
exports: [
CommonModule,
MaterialModule,
TranslateModule,
MaterialModule,
FlexLayoutModule,
FormsModule
],
providers: [NotyService]
})

export class SharedModule {
}

此时只需要在不同的模块的imports下，去引入这个共享的即可。

项目地址：https://github.com/jiwenjiang/angular4-material2