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 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
BootStrap 导航条实例代码
May 18 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python