首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >angular4实战(3) 插件引入及封装

angular4实战(3) 插件引入及封装

作者头像
j_bleach
发布2019-07-02 11:34:59
7200
发布2019-07-02 11:34:59
举报
文章被收录于专栏:前端加油站前端加油站

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78118193

@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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年09月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • @types
  • 服务封装
  • 模块共享
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档