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

在Angular 4中,如何对准带有子路由的辅助插座?

在Angular 4中,可以使用<router-outlet>来定义主路由和子路由的插座。辅助插座是通过在<router-outlet>上添加name属性来定义的。

首先,在主路由的模板中,使用<router-outlet>来定义主路由的插座:

代码语言:txt
复制
<router-outlet></router-outlet>

然后,在子路由的模板中,使用<router-outlet>来定义子路由的插座,并通过name属性来指定辅助插座的名称:

代码语言:txt
复制
<router-outlet name="aux"></router-outlet>

接下来,在定义路由时,使用outlet属性来指定路由应该渲染到哪个插座中。对于主路由,不需要指定outlet属性,默认会渲染到主插座中。对于子路由,需要通过outlet属性来指定渲染到哪个辅助插座中。

代码语言:txt
复制
const routes: Routes = [
  { path: '', component: HomeComponent }, // 主路由
  { path: 'sub', component: SubComponent, outlet: 'aux' } // 子路由
];

在上面的例子中,当访问主路由时,会渲染HomeComponent到主插座中。当访问子路由/sub时,会渲染SubComponent到辅助插座aux中。

这样就可以在Angular 4中对准带有子路由的辅助插座了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB),腾讯云云原生容器服务(TKE)。

腾讯云产品介绍链接地址:

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

基本功能概述 本指南分阶段进行,以里程碑为标志,从简单双页面和建筑开始,走向带有路由模块化多视图设计。 核心路由器概念这一概述将有助于您定位后面的细节。... 大多数路由应用程序index.html 中都有一个元素来告诉路由如何编写导航网址。 有关详细信息,请参阅设置基础href。...路由插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置宿主视图HTML中RouterOutlet后显示HeroesComponent...Routing component 一个带有RouterOutletAngular组件,可根据路由导航显示视图。 示例应用程序 本指南介绍了多页面路由示例应用程序开发。...危机详情显示列表下方同一页面上视图中。 改变危机名称。 请注意危机列表中相应名称不会更改。 ?

6.1K20

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

前言:   上一篇文章我们讲了如何在创建Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍如何在创建好后台管理页面框架快速生成NG-ZORRO相关组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...ngAfterViewChecked() 每当 Angular 做完组件视图和视图变更检测之后调用。...它允许你做以下这些事情: 创建一个新 Angular 应用程序 运行带有 LiveReload 支持开发服务器,以便在开发过程中预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序单元测试...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块路由

3.9K20

Angular快速学习笔记(2) -- 架构

Angular 每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树根部开始,递归处理全部组件。 ?...使用管道: {{interpolated_value | pipe_name}} 需要处理值后面,加上|, 管道还能接收一些参数,来控制它该如何进行转换。...当 Angular 渲染它们时候,会根据指令给出指示对 DOM 进行转换。 指令就是一个带有 @Directive 装饰器类。...如何使用: Angular 中,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中 使用 @Injectable 装饰器来表明一个组件或其它类...1.4 路由(Routing) Angular Router 模块提供了一个服务,它可以让你定义应用各个不同状态和视图层次结构之间导航时要使用路径。

5.2K20

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

/currency/currency.module#CurrencyModule' } ]; 更新后代码告诉 Angular,在用户请求时加载辅助模块。...单击 Weather,然后单击 Weather 菜单下一个菜单项。...练习 3:预加载 除了等待用户调用辅助模块路径,有时预先加载这些模块更高效。在这种情况下,贪婪加载主要模块后,路由器开始预加载标有 loadChildren 属性所有剩余模块。...参见 Angular4PreLoadModules.zip 中示例应用程序,更详细地了解预加载。 自定义预加载:大型应用程序中,仅预先加载少数惰性加载模块做法是比较合理。...请参见 Angular 文档 路由和导航 部分,了解如何自定义预加载配置。 结束语 加载时间是应用程序性能关键因素,它会影响应用程序用户体验。

2.3K10

angular基础面试题_java web面试题

PercentPipe :把数字转换成百分比字符串,根据本地环境中规则进行格式化angualr angular路由配置: 路由配置 app.route.ts 中 路由跳转方式 [routerLink...(['/news'],navigationExtras); app.module.ts包含内容解析 NgModule 是一个带有 @NgModule() 装饰器类。...Angular 初始化完组件视图及其视图或包含该指令视图之后调用。...ng..之后,只调用一次 ngAfterViewChecked:每当 Angular 做完组件视图和视图或包含该指令视图变更检测之后调用, gAfterViewInit...灵活路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 Angular 2应用中,我们应该注意哪些安全威胁?

13K50

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

Angular 2中路由工作原理是什么? 路由是能够让用户视图/组件之间导航机制。Angular 2简化了路由,并提供了模块级(延迟加载)下配置和定义灵活性。 ...成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象树,同时包含路由器的当前状态。重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新状态。...Angular2中,组件中发生任何改变总是从当前组件传播到其所有组件中。如果一个组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...如何优化Angular 2应用程序来获得更好性能? 优化取决于应用程序类型和大小以及许多其他因素。但一般来说,优化Angular 2应用程序时,我会考虑以下几点: 考虑AOT编译。...如何实现不出现编辑器警告自定义类型? 大多数情况下,第三方库都带有.d.ts 文件,用于类型定义。

17.3K80

物联网无线短距离ZigBee技术详解

ZigBee 路由器(英文名:ZigBee Router,通常简写为:ZR),路由ZigBee 网络中既可以充当父节点,也可以充当节点,有信息转发和辅助协调器维护网络功能。...ZigBee 端节点(英文名:ZigBee End-Device,通常简写为:ZED),终端ZigBee 网络中,其功能最为简单,只能加入网络,为最末端节点设备。...,为Zigbee网络协议层标准版本号,Zstack-CC2530-2.5.1A中版本号为2; 发现路由:发现路由域占位2位,00标准禁止发现,01表示使能路由发现,10表示强制路由发现,11保留;...源路由:源路由域占1位,1表示源路由在网络报头中存在,如果源路由帧不存在,则源路由域值为0; IEEE目的地址:为1时,网络帧报头包含整个IEEE目的地址 IEEE源地址:为1时,网络帧报头包含整个...3.3.2 准备知识 照明控制一般可以通过开关或智能插座,因此我们需要对开关和智能插座有一定了解。 现阶段市面上常用家用电气照明开关分为传统开关和智能开关。

2K20

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...导入其它带有组件、指令和管道模块,这些模块中元件都是本模块所需。 提供一些供应用中其它组件使用服务。 每个 Angular 应用都至少有一个模块,也就是根模块。...每个组件都应该(且只能)声明(declare)一个 NgModule 类中。 如果你使用了未声明过组件,Angular 就会报错。 declarations 数组只能接受可声明对象。...依赖注入 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。...3.路由 在用户使用应用程序时,Angular 路由器能让用户从一个视图导航到另一个视图。

2.9K20

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

应该有很多人都抱怨过 Angular 应用性能问题。其实,搭建Angular项目时,通过使用打包、懒加载、变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能。...为了帮助开发者深入理解和使用Angular,本文将以我司客户中最为典型业务场景——在线表格编辑为例,演示如何借助懒加载技术,基于 Angular框架中实现在线导入导出Excel以及数据在线填报功能...因此,对于多路由大型应用,建议采用懒加载——按需加载NgModule模式。通过懒加载可以减少初始包尺寸,从而减少加载时间。 什么是懒加载? Web应用程序中,系统瓶颈常在于系统响应速度。...懒加载模块路由模块中,添加一个指向该组件路由。本次demo存在两个懒加载模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL,但是有导航UI会更好用。...这种方式下 Angular 就会知道这个路由列表只负责提供额外路由并且其设计意图是作为特性模块使用。你可以多个模块中使用 forChild()。

4K20

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

Angular 模块是带有 @NgModule 装饰器函数类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...变更 拆分和新增了路由模块 ActivatedRoute:获取路由信息 路由事件实例,如NavigationEnd表示导航事件变更完毕,等 反正改了挺多,请自行查询官方API文档…[捂脸] 新增路由模块...升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航状态定位失效 原因:升级后,router和componenthook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...解决办法:目前路由事件结束(NavigationEnd)时,手动更新组件状态。 内嵌样式失效。"...原因:angular(v4.1.1)中,使用ActivatedRouteAPI获取路由信息。

8.1K00

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

导航是很简单,只是不同页面之间切换,路由是实现导航一种。 一个url对应一个页面,angular2中是一个组件。定义一个规则。...设计时候,先去 基础知识 大多数带路由应用都要在index.html标签下先添加一个元素,来告诉路由器该如何合成导航用URL。...路由是从@angular/router包中引入路由都是需要进行配置。而这个配置需要也就是RouterModule模块。 一个路由配置 path中不能用斜线/开头。...用Resolve路由激活之前获取路由数据。 用CanLoad来处理异步导航到某特性模块情况。 使用规则 分层路由每个级别上,我们都可以设置多个守卫。...这并不是配置中失误,而是使用无组件路由

3.2K10

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

模块没有父子关系,只有引入 ---- 用@NgModule来定义应用中模块。 Angular 模块是带有 @NgModule 装饰器函数。...@NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。...那么我们提供服务地方就有多个: 可以组件中提供服务 可以模块创建中提供服务 组件中提供服务 组件中提供服务,它作用范围就仅仅局限于该组件以及其组件。 e.g....下面这个组件,就是仅仅在该组件以及其组件中使用了FileService服务,也就是说,sino-file-list组件每次创建都是创建新FileService服务 @Component...特性模块可以对其他模块暴露或隐藏自己实现。 特性模块用来提供了内聚功能集合。 聚焦于应用某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关工具集合。

2.2K30

Angular2 VS Angular4 深度对比:特性、性能

对于成熟开发人员来说,有以上两种选择是一件很棒事情;但是,对于处于学习阶段新晋开发人员来说,可能有点不知如何选择。...接下来一起了解Angular2这个版本发布原因以及如何将其添加到Web开发中。 ...依赖注入模块化开发和元素隔离方面非常有帮助,但它实现一直受到Angular 1.x困扰。Angular2解决了这个问题,另外还添加了一些缺少功能,如注入以及生命周期/范围控制。...注入: 注入继承了其父级注入所有的专业服务,以及层次重写能力。根据需要,在一定范围内,一些类型对象可以被调用和机械重写。...子路由路由将通过提供自身路由功能,将程序每个部分转换为更紧密应用程序,这有助于整个程序功能集合封装。

8.7K20

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

一、Overview Angular 入坑记录笔记第七篇,介绍 Angular模块相关概念,了解相关使用场景,以及知晓如何通过特性模块来组织我们 Angular 应用 对应官方文档地址:...、HttpClientModule 这种 Angular 内置库也都是一个个 NgModule,开发中通过将组件、指令、管道、服务或其它代码文件聚合成一个内聚功能块,专注于系统某个功能模块...@angular/forms 构建响应式表单 RouterModule @angular/router 使用前端路由 HttpClientModule @angular/common/http 发起...,通过使用 @NgModule 装饰器装饰 AppModule 类,定义了这个模块一些属性特征,从而告诉 Angular 如何编译和启动本应用 import { BrowserModule } from...对于带有很多路由大型应用,考虑使用惰性加载模式。

1.8K20

用树莓派搭建一个实时视频监控系统

搭建方法 硬件准备 (1)装好系统 首先你得有一个树莓派CSI接口摄像头和一个装好系统树莓派。如何安装系统请参考我之前教程如何给树莓派写入镜像 ? ?...按Enter键进入菜单 ?...确保树莓派已经关机情况下,用指甲轻轻抠开CSI接口卡扣,将有金属接触面的一面对准卡扣白色一面,再按压扣紧卡扣就安装好摄像头了。 ? 3....找到树莓派IP地址 树莓派终端输入命令 ipconfig,wlan0即为树莓派ip地址,比如我这里是 192.168.123.126 ? 4....局域网内任何设备,打开浏览器地址栏输入 192.168.123.126:8000,(冒号前IP地址换成你自己树莓派ip)即可打开网络监控系统。视频响应延时取决于你树莓派和路由性能。

9.7K22

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

一、Overview Angular 入坑记录笔记第六篇,介绍 Angular 路由模块中关于路由守卫相关知识点,了解常用到路由守卫接口,知道如何通过实现路由守卫接口来实现特定功能需求,以及实现对于特性模块惰性加载...4.2、路由守卫 Angular 中,路由守卫主要可以解决以下问题 对于用户访问页面的权限校验(是否已经登录?已经登录角色是否有权限进入?)...跳转到组件前获取某些必须数据 离开页面时,提示用户是否保存未提交修改 Angular 路由模块提供了如下几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址操作...UrlTree:取消当前导航,并导航到路由守卫返回这个 UrlTree 上(一个新路由信息) 4.2.1、CanActivate:认证授权 实现路由守卫之前,可以通过 Angular CLI...这里其实相当于将原先两级路由模式(父:crisis-list,:crisis-detail)改成了三级(父:crisis-list,:' '(空路径),孙:crisis-detail) import

3.7K30
领券