首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么保存时NgModule中的项目会重新对齐?

保存时NgModule中的项目会重新对齐是因为NgModule是Angular框架中的一个核心概念,用于组织和管理应用程序的各个模块。当我们对NgModule中的项目进行修改并保存时,Angular会重新编译和重新加载应用程序,以确保对修改的反映能够正确地应用到应用程序中。

具体来说,当我们对NgModule中的项目进行修改时,例如添加、删除或修改了组件、指令、服务等,Angular会重新编译应用程序的代码,并重新加载应用程序。这是因为NgModule是一个装饰器函数,它会在应用程序启动时被调用,用于配置和初始化应用程序的各个模块。当我们对NgModule中的项目进行修改后,Angular会重新执行NgModule的装饰器函数,以更新应用程序的配置和初始化过程。

重新对齐NgModule中的项目有以下几个优势和应用场景:

  1. 模块化管理:NgModule可以将应用程序划分为多个模块,每个模块负责特定的功能或特性。通过重新对齐NgModule中的项目,我们可以方便地添加、删除或修改模块,从而实现应用程序的模块化管理。
  2. 代码优化:重新对齐NgModule中的项目可以触发Angular的编译和优化过程,从而生成更高效、更精简的代码。这可以提高应用程序的性能和加载速度。
  3. 动态加载:NgModule中的项目可以通过懒加载的方式进行动态加载,从而实现按需加载和减少初始加载时间的目的。重新对齐NgModule中的项目可以确保动态加载的模块能够正确地被加载和使用。
  4. 组件复用:NgModule中的项目可以被其他模块引用和复用。重新对齐NgModule中的项目可以确保其他模块能够正确地引用和使用这些项目,从而实现组件的复用和共享。

对于保存时NgModule中的项目重新对齐的具体实现和相关的腾讯云产品,可以参考腾讯云的官方文档和相关教程。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 路由守卫连连看

4.2.3、CanDeactivate:处理用户未提交修改 当进行表单填报之类操作,因为涉及到一个提交动作,当用户没有点击保存按钮就离开,最好能暂停,对用户进行一个友好性提示,由用户选择后续操作...; } } 这里模拟判断用户有没有修改原始数据,当用户修改了数据并移动到别的页面,触发路由守卫,提示用户是否保存后再离开当前页面 ?...4.3、异步路由 4.3.1、惰性加载 当应用逐渐扩大,使用现有的加载方式造成应用在第一次访问就加载了全部组件,从而导致系统首次渲染过慢。...,如果你在创建模块命令设置了自动引入当前模块到 app.module.ts 文件,大概率遇到下面的问题 ?...框架会通过 loadChildren 字符串来动态加载 CrisisModule,然后把 CrisisModule 添加到当前路由配置,而惰性加载和重新配置工作只会发生一次,也就是在该路由首次被请求执行

3.8K30

小心 Angular 单例 Service

比如,在我们整个应用,我们会有一个管理区域需要呈现大量表格数据(同时这些数据只在这个管理区域展现),这些数据储存在内存。...译者注 之所以翻译了这篇文章,是因为今天在整理项目代码时候,偶然发现了这个问题,虽然我使用Angular也有一段时间了,但是依然将很多没有必要声明在NgModule服务以单例模式方式声明了。...但是有一个特例,懒加载模块service是会在模块加载重新创建一个实例,懒加载模块均会注入后创建service实例,因此懒加载模块与非懒加载模块间service非单例。...使用forRoot 使用forRoot可以保证当前模块即使是懒加载模块,在加载也不会重新创建一个新service实例,因为懒加载模块在加载临时创建一个从属于根injector子injector...,根据Angular依赖注入流程,当尝试通过一个子injector中注入不存在实例对象尝试向父级injector获取,因此最终可保证该service在应用任何地方被注入均是单例。

2K30
  • Angular Library 快速入门

    文件添加 sf-lib 项目; 在 package.json 文件添加 ng-packagr 依赖; 在 tsconfig.json 文件添加 sf-lib 库引用; 在项目 projects...另外在 tsconfig.json 文件自动添加以下 paths 信息: "compilerOptions": { "paths": { "sf-lib": [ "dist/... paths 属性查找,然后再 node_modules 查找。...sf-lib 默认创建组件: 通常情况下,我们删除默认创建组件,然后创建自定义组件,下面我们就来介绍如何为 sf-lib 创建自定义组件。...在完成新建 ButtonComponent 组件导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以在模板中使用刚创建

    2.4K10

    Angular Provider 作用域

    当你注册根级别的服务,Angular 创建一个单独共享服务实例。如果在 @Injectable 元数据中注册服务,Angular 会在构建阶段自动剔除无用服务,进而优化我们应用程序。...为什么这样呢?...为什么懒加载模块与非懒加载模块产生不一样结果呢?...这是因为对于懒加载模块来说,它会基于模块内配置 providers 创建一个子注入器,以上面的示例来说,就是在 UserModule 获取 UserService 服务创建一个新 UserService...当在懒加载模块中使用模块外服务,它将使用根注入器创建服务实例。但如果已经在懒加载模块中注册了 provider,在模块内获取对应服务,它将从模块子注入器获取对应服务实例。

    1.8K20

    Angular 从入坑到挖坑 - 模块简介

    NgModule 简介 在 Angular 应用,至少会存在一个 NgModule,也就是应用根模块(AppModule),通过引导这个根模块就可以启动整个项目 像开发中使用到 FormsModule...在使用 @NgModule 装饰器,通常会使用到下面的属性来定义一个模块 declarations:当前模块组件、指令、管道 imports:当前模块所需其它 NgModule 模块...当创建新组件,需要将它们添加到 declarations 数组。...,因此,可以通过添加到 providers 数组,提供给别的模块使用 bootstrap Angular 应用通过引导根模块来启动,因为涉及到构建组件树,形成实际 DOM,因此需要在 bootstrap...需要和 BrowserModule、AppRoutingModule 一样,在根模块 imports 引入 默认情况下,NgModule 都是急性加载,也就是说它会在应用加载尽快加载,所有模块都是如此

    1.8K20

    angular4实战(2) router

    在上一章节,通过新建项目之后,ngModule自动引入路由模块,接下来需要做事情就是对路由模块进行配置。为了方便维护,单独把路由模块配置拿出来,再去输出到ngModule。...项目结构如下: ?...(ps:项目本身一直在写,之后可能有所改变,但思路不变,不直接通过app根节点去管理) 在路由具体配置方面: {path: '', redirectTo: '/login', pathMatch:...'full'} redirectTo表示在页面路由为空(一般是刚进入项目),重定向到login页面。...{path: '**', component: NotFoundComponent} 路由是根据path自上而下匹配,如果说浏览器地址上路由变成一个不存在,那么一直向下匹配,直到匹配到*

    54930

    Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    在上面的配置,带静态路径路由被放在了前面,后面是空路径路由,因此它会作为默认路由。而通配符路由被放在最后面,这是因为它是最通用路由,应该只在前面找不到其它能匹配路由才匹配它。...可以在路由配置添加守卫来进行处理。守卫可以返回一个boolean值,为true,导航过程继续,为false,导航被取消,当然这时候也可以被导航到其他页面。...当用户要导航到外面,该怎么处理这些既没有审核通过又没有保存改动呢? 我们不能马上离开,不在乎丢失这些改动风险,那显然是一种糟糕用户体验。 我们应该暂停,并让用户决定该怎么做。...在等待服务器答复,我们没法阻塞它 —— 这在浏览器是不可能。 我们只能用异步方式在等待服务器答复之前先停止导航。 我们需要CanDeactivate守卫。...链接参数数组 链接参数数组保存路由导航所需成分: 指向目标组件那个路由路径(path) 必备路由参数和可选路由参数,它们将进入该路由URL e.g.我们可以把RouterLink指令绑定到一个数组

    3.3K10

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

    再引入使用js脚本之前,需要事先引入对应类型声明文件(xx.d.ts),类似于c.h头文件。...本项目提醒插件使用了noty,它本身作为一款JS插件,其内部也是支持了typescript引入。 ?...当插件本身已经存在了声明文件,就可以在项目中去使用它了,但是直接引入,typescript还是不认得。 如: ? 此时两种解决方案。...方案一: 将import Noty from 'noty'改为import * as Noty from 'noty'; 方案二: 在tsconfig.jsoncompilerOptions下添加配置...模块共享 这边主要提到一点是,当切换到stones模块下面,之前在app.component下声明各种服务,不会生效,需要在stones模块下重新去挂载,这样是非常麻烦,因此,在实际项目中,会将那些公用服务

    76630

    Angular系列教程-第五节

    1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...它会标出该模块自己组件、指令和管道,通过 exports 属性公开其中一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用依赖注入器。...NgModule 元数据会做这些: 声明某些组件、指令和管道属于这个模块。 公开其中部分组件、指令和管道,以便其它模块组件模板可以使用它们。...该模块 declarations 数组告诉 Angular 哪些组件属于该模块。 当你创建更多组件,也要把它们添加到 declarations 。...angular.json 为工作区所有项目指定 CLI 默认配置,包括 CLI 要用到构建、启动开发服务器和测试工具配置项。

    2.9K20

    Angular2下使用pdf插件

    前言 最近需要在Angualr2建项目里做一个pdf显示功能,在网上找了个插件,不过由于是第一次使用额外插件,在用时候遇到了一些坑,这里权且记一下使用步骤,方便以后参考。...安装 这里需要安装两个包:pdfjs-dist和ng2-pdf-viewer,安装是要顺便保存到package.json里,因此在项目根目录下输入下面命令: npm install pdfjs-dist...注册主配置文件 要使用他,我们还要在app.module.ts文件里注册这个包,才能在其他文件里使用,一个最简单配置如下: import { NgModule } from '@angular/core.../app/app.component'; import { PdfViewerComponent } from 'ng2-pdf-viewer'; @NgModule({ imports: [BrowserModule...页面配置 在模板页面,只要在适当位置添加类似下面的标签: <pdf-viewer [src]="pdfSrc" [page]="page"

    1K20

    Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

    管理指令、管道、组件 在模块定义提供商是会加到根模块中去,正常引导的话,如果是惰性加载的话,就会放在一部分(在loading范围内根模块)。...模块没有父子关系,只有引入 ---- 用@NgModule来定义应用模块。 Angular 模块是带有 @NgModule 装饰器函数。...>我们在根模块imports了`IonicModule`,但是在crud模块也必须重新imports`IonicModule`,不然,crud模块中会不识别ionic指令。 * ?...forRoot 根模块AppModule导入CrudModule类并把它providers添加到AppModule服务提供商。...更精确说法是,Angular 先累加所有导入提供商,*然后才*把它们追加到@NgModule.providers

    2.2K30

    Ionic 开发之 Ionic Storage 详解

    在原生应用程序环境运行时,存储方式优先使用 SQLite 原因,是因为它最稳定和最广泛使用文件数据之一,并且避免了诸如 localStorage 和 IndexedDB 之类一些陷阱,比如在低磁盘空间情况下自动清理数据... imports 列表: import { IonicStorageModule } from '@ionic/storage'; @NgModule({ declarations: [...你可以在使用前调用 Storage.ready() 方法,不过该方法仅在 1.1.7 以上版本才支持: this.storage.ready().then((db) => { }); 若需要保存数据,...(reason)); }); } } 上面代码,在调用 db.setDriver() 方法,会调用内部 _getDriverOrder() 方法转换成相应驱动: private _getDriverOrder...实际开发过程,在数据存储,我们可能还会涉及数据响应式、数据加密、数据压缩、数据迁移和备份,有上述需求同学,可以了解一下 rxdb 这个库。

    3.9K10

    Angular 路由配置(预加载配置,懒加载配置)

    @NgModule作用: NgModule 最根本意义是帮助开发者组织业务代码,开发者可以利用 NgModule 把关系比较紧密组件组织到一起,这是首要。...NgModule 是打包时候用到最小单位,打包时候检查所有 @NgModule 和路由配置,Angular底层是使用webpack打包。...forRoot()//在主模块定义主要路由信息 forChild()``//应用在特性模块(子模块) (2)懒加载:loadChildren 此处并没有将对应模块加入到AppModule,而是通过...这就是模块懒加载功能具体应用,当用户访问 /xxx/** 路径时候,才会加载对应模块,这减少了应用启动加载资源大小。...loadChildren属性值由三部分组成: 需要导入Module相对路径 #分隔符 导出模块类名称 (3)预加载 在使用懒加载情况下,路由第一次加载某个模块,有时反应有延迟。

    3.2K30

    使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    现在我们已经建立了一些假数据(我们使用ionViewDidLoad生命周期钩子,这将在页面加载被触发),您应该能够看到它已经在列表渲染了: ?...注意我们这里建立了一个onDidDismiss监听器,这样就可以获取模态关闭回传数据,并通过saveItem方法保存。现在,我们仅通过将数据push到items数组,最终,我们将保存到数据库。.../item-detail-page/item-detail-page'; 这时就可以push出项目的细节页面,然后传入被点击项目。如果你现在点击存在于列表项目,你可能看到如下界面: ?...在构造函数,我们建立一个 Storage 服务引用。 数组save函数简单地将所有的项放入数组并保存到存储,每当项目变化我们将调用这个函数。...promise让我们数据完成加载执行一些操作,而不需要暂停整个应用程序。 最后,我们还添加一个调用save 函数保存在数据服务当一个新条目被添加。

    6.1K50

    Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....添加路由 ,路由定义 告诉路由器,当用户点击某个链接或者在浏览器地址栏输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...要使用路由,必须首先初始化路由器,并让它开始监听浏览器地址变化 b....把 RouterModule 添加到 @NgModule.imports 数组,并用 routes 来配置它 c. imports: [ RouterModule.forRoot(routes) ]...使用http,需要在AppModule, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c.

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....添加路由 ,路由定义 告诉路由器,当用户点击某个链接或者在浏览器地址栏输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...要使用路由,必须首先初始化路由器,并让它开始监听浏览器地址变化 b....把 RouterModule 添加到 @NgModule.imports 数组,并用 routes 来配置它 c. imports: [ RouterModule.forRoot(routes) ]...使用http,需要在AppModule, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c.

    3.7K50

    Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用性能问题。其实,在搭建Angular项目,通过使用打包、懒加载、变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能。...但是发布后,用户打开页面在加载时间上要比开发环境有所延长,带来用户体验较差。经过调研,发现在Angular默认NgModule都是急性加载,也就是会在应用加载尽快加载。...如果系统响应速度过慢,用户就会出现埋怨情绪,系统价值也因此大打折扣。懒加载会在首次加载,将必须模块加载,而其余暂时用不到模块则不会加载。...例如在商城系统,用户打开首页,只需展示商品,此时用不上支付模块,所以支付模块就可以使用懒加载技术。 项目优化 1....在懒加载模块路由模块,添加一个指向该组件路由。本次demo存在两个懒加载模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL,但是有导航UI更好用。

    4.1K20
    领券