angular4实战(3) 插件引入及封装
来源:互联网 发布:古驰精仿皮带淘宝 编辑:程序博客网 时间:2024/06/08 04:56
@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
阅读全文
0 0
- angular4实战(3) 插件引入及封装
- angular4实战(2) router
- angular4实战(4)ngrx
- angular4 引入bootstrap
- angular4中引入svg
- angular4 引入环境变量
- angular4实战(1) angular-cli
- Angular4 路由 实战
- juery实战4:封装拖拽插件
- angular4实战一项目创建
- Yii中引入php文件及插件
- jQuery插件原理及封装
- Angular4.x 引入第三方 JS
- 如何在Angular4中引入jquery
- Angular4.x开发环境及项目创建(一)
- 插件封装(banner)
- angular4环境搭建及配置
- Angular4 第四章 依赖注入实战
- SQL优化
- 视频会议系统的音视频效果优化 音视频SDK
- java 数组 循环
- 我这个java.lang.NoClassDefFoundError: com/frame/SparBuoy应该怎改
- 被杀死的App能否通过广播唤醒
- angular4实战(3) 插件引入及封装
- 设计模式六大原则(简要概述)
- CentOS
- 数据结构实验之栈与队列六:下一较大值(二)
- java基础学习笔记
- window10下的eclipse用java连接hadoop执行mapreduce任务
- 时时勤拂拭,勿使有尘埃
- java操作ElasticSearch的API
- Little gold pig