angular2 NgModel模块的具体使用方法


Posted in Javascript onApril 10, 2019

angular2 NgModel 模块

在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。我们也可以通过定义子模块来扩展我们应用的功能。

NgModule 的API

interface NgModule {
   // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
   //      然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
  providers : Provider[]
   // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
   //        然后我们就可以在这个模块中使用它们了.
  declarations : Array<Type<any>|any[]>
   // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
   //     可以直接使用别的模块提供的一些指令,组件等等.
  imports : Array<Type<any>|ModuleWithProviders|any[]>
   // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
   //     如果别的模块导入了我们这个模块,
   //     那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
  exports : Array<Type<any>|any[]>
  // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
  //         Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
  entryComponents : Array<Type<any>|any[]>
  // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
  bootstrap : Array<Type<any>|any[]>
  // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
  schemas : Array<SchemaMetadata|any[]>
  // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
  //   那么这个模块将不会被注册.
  id : string
 }

常用API简介

NgModule的主要属性如下:

  • declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员,声明之后才能使用对应的组件等。
  • providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
  • imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

子模块

随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。

功能模块与根模块的职责区别主要有以下两点:

  • 根模块的目的在于启动app,功能模块的目的在于扩展app
  • 功能模块可以根据需要暴露或隐藏具体的实现

Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
 { path: '', redirectTo: 'contact', pathMatch: 'full'},
 { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延迟加载子模块,子模块的结构和父模块一样,它会去加载子模块中的Routes配置,并跳转对应的组件中去。
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中,path指明路径,loadChildren指明使用延迟加载,'app/crisis/crisis.module#CrisisModule'指明了模块的路径,和模块的名称。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 #Javascript
javascript判断一个变量是数组还是对象
Apr 10 #Javascript
Angular CLI 使用教程指南参考小结
Apr 10 #Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 #Javascript
element-ui多文件上传的实现示例
Apr 10 #Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 #Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 #Javascript
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
js实现简单进度条效果
2020/03/25 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python中的时区问题
2021/01/14 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
水利学院求职自荐书
2014/02/01 职场文书
行政内勤岗位职责
2014/04/07 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年民警工作总结
2014/11/25 职场文书
团支部书记竞选稿
2015/11/21 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
python - asyncio异步编程
2021/04/06 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript