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

Angular routing -路由到惰性模块子路径不会启动组件

Angular routing是Angular框架中用于管理应用程序导航和路由的功能。它允许开发人员根据URL路径加载不同的组件和模块,实现单页应用程序的导航和页面切换。

惰性模块是指在需要时才会被加载的模块,而不是在应用程序启动时就加载所有模块。惰性加载模块可以提高应用程序的性能和加载速度,因为只有在需要时才会加载相关的代码和资源。

当路由到惰性模块的子路径时,不会自动启动组件。这意味着当导航到惰性模块的子路径时,不会自动加载和显示相关的组件。相反,需要在惰性模块中定义子路由,并在子路由配置中指定要加载的组件。

以下是一个完善且全面的答案示例:

Angular routing是Angular框架中用于管理应用程序导航和路由的功能。它允许开发人员根据URL路径加载不同的组件和模块,实现单页应用程序的导航和页面切换。

惰性模块是指在需要时才会被加载的模块,而不是在应用程序启动时就加载所有模块。惰性加载模块可以提高应用程序的性能和加载速度,因为只有在需要时才会加载相关的代码和资源。

当路由到惰性模块的子路径时,不会自动启动组件。这意味着当导航到惰性模块的子路径时,不会自动加载和显示相关的组件。相反,需要在惰性模块中定义子路由,并在子路由配置中指定要加载的组件。

对于Angular开发者来说,可以通过以下步骤实现路由到惰性模块子路径不启动组件的功能:

  1. 在惰性模块中定义子路由:在惰性模块的路由配置中,定义子路由,并指定要加载的组件。例如,可以使用children属性定义子路由。
  2. 在父模块中配置惰性加载:在父模块的路由配置中,使用loadChildren属性指定要惰性加载的模块。例如,可以使用loadChildren属性指定惰性加载模块的路径。
  3. 在父模块中配置子路由:在父模块的路由配置中,使用children属性配置子路由。例如,可以使用children属性指定子路由的路径和组件。

通过以上步骤,当导航到惰性模块的子路径时,不会自动启动组件。只有当访问了子路由的路径时,才会加载和显示相关的组件。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云服务器(CVM):提供可扩展的云服务器实例,满足各种计算需求。详情请参考:腾讯云服务器
  • 腾讯云云数据库MySQL版:提供高性能、可扩展的云数据库服务。详情请参考:腾讯云云数据库MySQL版
  • 腾讯云CDN:提供全球加速、高可靠的内容分发网络服务。详情请参考:腾讯云CDN
  • 腾讯云人工智能:提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能

请注意,以上推荐的腾讯云产品仅作为示例,实际选择产品时应根据具体需求进行评估和选择。

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

相关·内容

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

一、Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实现对于特性模块惰性加载...从入坑挖坑 - 组件食用指南 Angular 从入坑挖坑 - 表单控件概览 Angular 从入坑挖坑 - HTTP 请求概览 Angular 从入坑挖坑 - Router 路由使用入门指北...这里其实相当于将原先两级的路由模式(父:crisis-list,:crisis-detail)改成了三级(父:crisis-list,:' '(空路径),孙:crisis-detail) import...因此这里可以使用惰性加载的方式在请求具体的模块时才加载对应的组件 惰性加载只针对于特性模块(NgModule),因此为了使用惰性加载这个功能点,我们需要将系统按照功能划分,拆分出一个个独立的模块 首先通过...当问题解决后,就可以针对 crisis 模块设置惰性加载 在配置惰性路由时,我们需要以一种类似于子路由的方式进行配置,通过路由的 loadChildren 属性来加载对应的模块,而不是具体的组件,修改后的

3.7K30

🔥【Angular教程】路由入门

为Home组件增加带路由模块配置 通过cli为Home组件创建带路由模块配置: ng generate module pages/home/home --module app --flat --routing...补充Home组模块组件并配置子路由 执行一下命令创建组件 ng g c pages/home/children/user-list ng g c pages/home/children/user-detail...配置无组件路由(空路由) 对路由进行分组而不增加额外的路径片段 { path: 'home', loadChildren: () => import('....移除根模块中关于Home模块的导入,使得模块完整分离 微调home-routing中home组件的path配置为"" const routes: Routes = [{ path: '',...angular中的Router模块提供来两种预加载的策略: 完全不预加载,这是默认值。惰性加载的特性区仍然会按需加载。 预加载所有惰性加载的特性区。

4.3K50

模块化开发 Angular 应用

如果你想在多个模块中使用你的组件,你需要将改组件捆绑一个单独的模块中,并将其导入模块中。 Imports 说到导入... 你的模块可以导入任意数量的子模块。还没有定义任何自定义模块?...Providers 我们定义了模块所需的任何的 @Injectables。然后,任何组件或者模块都可以通过依赖注入获得该 @Injectables 相同的实例。...减少加载时间的一种方法是将应用程序拆分成模块。 当你以惰性方式加载模块时,它不会包含在初始的程序中。相反,它仅在需要的时候才下载。为啥要下载我们还没用得上的组件呢,是吧? 那么,它是怎么工作的?...我们用惰性加载方式更改下先前的例子。为了实现这点,我们要在应用中添加路由。 首先,我们用路由配置来配置路由模块。...因为 Angular 还不知道现实哪个组件。为了解决这个问题,我们必须为 authentication module 定义子路由。这看起来集合和 app.routing 完全一样。

3K10

教程|在 Angular 4 中加载功能模块(下)

您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。...Currency 模块的配置完全相同。 当路由器导航更新后的地址时,它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。...第一次请求某个新路径时,会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。 更新 UI 接下来,将会更新用户界面。...请注意,x 和 y 块分别有一个整数值;惰性加载机制通过它们获知要加载这些模块。 练习 3:预加载 除了等待用户调用辅助模块路径,有时预先加载这些模块更高效。...这些是必须在应用程序启动时就能用的资源。 对大多数用户将要访问的模块使用预加载,即使它们不是第一个查找的或查找得最频繁的应用程序资源。 对需求不太高的模块使用惰性加载。

2.3K10

Angular 从入坑挖坑 - 模块简介

常见的 NgModule 模块 模块名称 模块所在文件 功能点 BrowserModule @angular/platform-browser 用于启动和运行浏览器应用的的基本服务 CommonModule...@angular/forms 构建响应式表单 RouterModule @angular/router 使用前端路由 HttpClientModule @angular/common/http 发起...,只有根模块中才会存在 3.2、应用的根模块模块是用来启动Angular 应用的模块, 按照惯例,它通常命名为 AppModule 通过 Angular CLI 新建一个应用后,默认的根模块代码如下...,因此,可以通过添加到 providers 数组中,提供给别的模块使用 bootstrap Angular 应用通过引导根模块启动的,因为会涉及构建组件树,形成实际的 DOM,因此需要在 bootstrap...对于带有很多路由的大型应用,考虑使用惰性加载的模式。

1.8K20

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

httpModule、路由等)   export:[],//声明出应用给其他的module使用   providers: [], //注入服务当前模块   bootstrap: []//默认启动哪个组件...forRoot()//在主模块中定义主要的路由信息 forChild()``//应用在特性模块(子模块)中 (2)懒加载:loadChildren 此处并没有将对应的模块加入AppModule中,而是通过...loadChildren属性,告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。...这就是模块懒加载功能的具体应用,当用户访问 /xxx/** 路径的时候,才会加载对应的模块,这减少了应用启动时加载资源的大小。...loadChildren的属性值由三部分组成: 需要导入Module的相对路径 #分隔符 导出模块类的名称 (3)预加载 在使用懒加载的情况下,路由第一次加载某个模块时,有时反应有延迟。

3.1K30

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

中配置SpreadJS CS 在Angular应用程序中使用 SpreadJS 使用Angular CLI构建和运行项目 完成上述环境搭建,便可将表格编辑器组件集成 Angular 项目中,实现在线导入导出...懒加载会在首次加载时,将必须的模块加载,而其余暂时用不到的模块不会加载。例如在商城系统中,用户打开首页时,只需展示商品,此时用不上支付模块,所以支付模块就可以使用懒加载技术。 项目优化 1....在懒加载模块路由模块中,添加一个指向该组件路由。本次的demo存在两个懒加载的模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL,但是有导航UI会更好用。...我们lazy-webexcel.module.ts文件看下,导入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件。...设置path为空,因为AppRoutingModule 中的路径已经设置了,LazyWebExcelRoutingModule中的此路由已经位于lazywebexcel这个上下文中。

4K20

教程|在 Angular 4 中加载功能模块(上)

一个 Angular 应用程序由以下部分组成: 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 每个 Angular 应用程序都至少有一个模块,称为根模块。...您可以引导根模块启动 Angular 应用程序。对于小型应用程序,只需要根模块和一些组件。在构建更复杂的中大型应用程序时,会向应用程序添加功能模块。...预加载:在预加载场景中,主应用程序启动所有标为贪婪加载的模块,然后几乎立即在后台加载 。当用户导航这些辅助模块中的某个模块时,就会加载该模块并准备就绪。...主应用程序中的路径 打开文件 app-routing.module.ts,如下所示。...如果未指定路径,数组中的第一项会重定向 /markets 路径。 要确认目前实现的应用程序功能,可在浏览器中返回到 http://localhost:4200。

2.2K10

angular面试题及答案_angular面试

Observables 和Promises的区别 Observables 是惰性的,意思是在subsciption之前什么都不会发生。...module声明了哪些模块可以被其他模块使用,依赖注入了哪些类,以及启动的component,模块来管理组件,使app实现模块化。 21. 怎样在组件中选择一个元素?...angular路由器使用base href 作为组件、模板的基地址,开发期间,通常会在index.html所在目录中启动服务器,所以这个目录就是根目录,所以可以在index.html 的顶部添加<base...Angular的懒加载 默认情况下,在初始化的时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载 懒加载 : 通俗 的讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载...) 7、服务(Services) 8、依赖注入(Dependency Injection) 9、路由routing) 29.

10.9K120

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

每个应用有至少一个 Angular 模块,根模块就是你用来启动此应用的模块。 按照惯例,它通常命名为 AppModule。 ?...ngAfterViewChecked() 每当 Angular 做完组件视图和视图的变更检测之后调用。...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,在【routes】对象中声明新模块路由,以及项目默认调转页面地址修改。 ?...2、配置首页组件路由(多模块路由完美解决): 首先,我们的博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块路由...如下所示 前往【my-blog-routing.module.ts】文件中配置上新创建的首页组件路由。 ? 3、前往根模块【my-blog.module.ts】声明首页组件: ?

3.9K20

Angular CLI 常用终端操作命令

end-to-end)测试 ng serve - 启动一个小型web服务器,用于托管应用 ng deploy - 即开即用,部署Github Pages或者Firebase 组件| ng g...---- CLI以多种方式支持路由: 初始化创建项目时,自动添加了 @angular/router ,自动添加到package.json 文件中 生成模块路由的时候可以使用指令...文件名的路由模块 ng g module my-module --routing 该文件包括一个空Routes对象,您可以填充不同组件和/或模块路由。...该--routing选项还会生成与模块名称相同的默认组件。 您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件中配置映射编译环境路径 //angular-cli.json

2.1K40

Angular学习(01)-架构概览

Angular架构概览.png 画了这个图来大概表示下 Angular 的架构概览,基本涉及一些常见的重要的知识点了,比如: 模块 路由 组件 模板 服务 指令 管道 不同的类型,文件名通常会都按照一定的规范来命名...路由 一个项目这么多模块Angular不会一开始就把所有模块都加载,而是惰性加载,按需加载。 那么,什么时候会去加载呢?...比如,我们新创建个 Home 模块,然后在根模块中创建个 app-routing 路由配置文件: //app-routing.module.ts import { NgModule } from '@angular...,这样当路由 home 时,会去加载 home 模块,然后看看 home 模块路由配置: //home-routing.module.ts import { NgModule } from '@angular...,但交由其视图来控制,所以,当导航 home 时,home 模块会去加载它内部的 HomeCenterComponent 组件

3.5K50

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

导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...路由是从@angular/router包中引入的。 路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。 一个路由配置 path中不能用斜线/开头。...如果当前URL无法匹配上我们配置过的任何一个路由中的路径路由器就会匹配上这一个。当需要显示404页面或者重定向其它路由时,该特性非常有用。...组件路由 我们需要将一些特征区域分割开来,做成自己单独的模块。必如hero模块。在这里,我们需要hero单独的导航,这也就是组件路由。...链接参数数组 链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL e.g.我们可以把RouterLink指令绑定一个数组

3.2K10

Angular 启用预加载

在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。...在上一节中,我们的根路由定义在 main.routing.ts,我们在 app.module.ts 中使用了根路由定义。 需要注意的是,Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。...在 Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。 启用预加载 我们在 forRoot 函数中,提供一个预加载的策略。...加载指定模块 我们还可以在路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义中的 data 来提供这个附加的数据。...即使您点击链接,也不会再有新的请求发生。\

1.5K00

Angular 6+依赖注入使用指南:providedIn与providers对比

即使它被多个模块的providers: []重复申明,它也不会重新创建实例。注入器只会创建一个实例,这是因为它们最终都会注册根级注入器。...从技术上讲,'root'代表 AppModule ,但Angular足够聪明,如果该服务只是在惰性组件/服务中注入,那么它只会绑定在延迟加载的bundle中。...附注 - 延迟加载模块的多重好处 Angular最大的优点之一是我们可以非常容易的将应用程序分成完全独立的逻辑块,这有以下好处… 1、更小的初始化代码,这意味着更快的加载和启动时间 2、懒惰加载的模块是真正隔离的...只有当服务被真正注入其他惰性组件时,它才会打包服务中 新语法能在 @Component和 @Directive中使用吗? 不,它们并不能。...懒加载模块 使用 providedIn: LazyServicesModule,然后由 LazyModule 导入,再由 Angular 路由惰性加载,以实施严格的模块边界和可维护的架构!

2.7K11

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有组件中。如果一个组件的更改需要反映其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...启用延迟加载的Plunkr示例:  我们不需要在根模块中导入或声明延迟加载模块。 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。...loadChildren会从根文件夹中获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。 在子模块中导入模块特定路由。...在子模块路由中,将路径指定为空字符串“”,也就是空路径。RouterModule.forChild会再次采用路由数组为子模块组件加载并配置路由器。

17.3K80

Angular 从入坑挖坑 - Router 路由使用入门指北

至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现 对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-tutorial 二、Contents...Angular 从入坑弃坑 - Angular 使用入门 Angular 从入坑挖坑 - 组件食用指南 Angular 从入坑挖坑 - 表单控件概览 Angular 从入坑挖坑 - HTTP...四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中,框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...最终我们定义的路由信息,都会在根模块中被引入整个项目 import { NgModule } from '@angular/core'; import { Routes, RouterModule }...,这里我们在定义路由信息时,定义了一个空路径用来表示系统的默认地址,当用户请求时,重定向 /home 路径上,因为只有完整的 url 地址匹配空字符串时才应该进行重定向操作,所以这里需要指定匹配模式是全部匹配

4.2K50

AngularDart 4.0 高级-路由概述 顶

最常见的,如上所示,是一个命名的路由,它将URL路径映射到组件。...以下是关键路由术语及其含义: 路由器组成部分 涵义 Router 显示活动URL的应用程序组件。 管理从一个组件下一个组件的导航。...定义路由器如何根据URL模式导航组件。 大多数路由路径路由名称和组件类型组成。 RouterOutlet 指示路由应该显示视图的指令()。...Routing component 一个带有RouterOutlet的Angular组件,可根据路由导航显示视图。 示例应用程序 本指南介绍了多页面路由示例应用程序的开发。...危机详情显示在列表下方的同一页面上的视图中。 改变危机的名称。 请注意危机列表中的相应名称不会更改。 ?

6.1K20

Angular2 :从 beta release4.0 版本升级总结

它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。 具体请参考官方文档。.../main-routing.module'; // 该模块相关Component import {SomeComponent} from '....变更 拆分和新增了路由模块 ActivatedRoute:获取路由信息 路由事件实例,如NavigationEnd表示导航事件变更完毕,等 反正改了挺多的,请自行查询官方API文档…[捂脸] 新增路由模块...升级angular(v2.4.0)(v4.1.1)版本后,左侧导航的状态定位失效 原因:升级后,router和component的hook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...:有些文件里面带有/// ,若路径不对文件找不到则无法启动

8.1K00
领券