对angular4子路由&辅助路由详解

子路由学习笔记：

子路由和路由一样的配置方法，都是声明好路由的入口，路由的路径，路由的出口，不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路由且可以无限循环嵌套。

路由入口：需要注意的是在子路由的入口处不能再用/来跟路径名，/会告诉angular去找跟组件，就会找到跟组件对应的模块，子路由需要用./

1.设置根路由入口：在模板（html）上设置，路由入口就是点击哪里开始路由到新组件（点击首页到首页去）

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>
<a [routerLink]="['/home',2]">主页</a>

子路由入口：（子路由是./）字路由是路由里面套的路由可以无限嵌套。

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">商品描述</a>

路由出口（路由出口是指新的组件将在哪里显示。入口指定什么时候加载新组件，出口指加载完的组件显示在哪里）：路由的出口和入口均在模板里面设置

<router-outlet></router-outlet>

路由路径：当路由的出口入口都设置好了的时候就来配置路由的路径。路径指定了当访问哪条路径的时候加载哪个模板

const routes:Routes=[
 {path:'',redirectTo:'/home',pathMatch:'full'},
 {path:'product',component:ProductComponent,children:[
 {path:'',component:ProductdescComponent} ,
 {path:'seller/:id',component:SellerComponent}
 ]},
 {path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量，一段是路径，一段时参数
 {path:'**',component:Code404Component}//通配符，当路径找不到的时候访问
];

辅助路由：

分三步：

1.在主路由的插座也就是出口处定义一个辅助路由插座：也就是定义个辅助路由的出口：辅助路由的出口定义和主路由一样，只是辅助路由比主路由多了一个name属性：用来指定辅助路由显示那几个组件

这里指辅助路由显示outlet叫做aux对应的组件

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

2.配置辅助路由路径：必须加一个outlet属性，指定该路由显示在名字叫什么的辅助路由出口（插座）上；

这里指当访问chat时加载XchatComponnet显示在名字叫aux的这个辅助路由出处。

{path:'chat',component:XhatComponent,outlet:'aux'},

3.配置入口参数：辅助路由的参数将是一个对象，这个对象里面有一个属性outlets，这个属性的值也是一个对象，该对象里面传一个name属性指定要显示的辅助路由的名字，值是该辅助路由需要显示的组件路径；比如下面：名字叫aux的辅助路由将显示路径为chat的组件

需要注意的是当不希望辅助路由显示的时候可以吧name设置为null。

这里指点击开始聊天的时候加载路径为chat对应的组件，显示在名字叫做aux的辅助路由出口上。

<a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>

当希望跳转辅助路由的同时主路由跳转到指定的组件的时候：可以在入口文件加一个属性：primary,属性的值是需要跳转的主组件的路由路径例如下面点击聊天的同时不管目前在哪个组件下主路由都会跳转回home路径下的组件

<a [routerLink]="[{outlets:{primary:home, aux:'chat'}}]">开始聊天</a>

以上这篇对angular4子路由&辅助路由详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

  • Angular 4.x 路由快速入门学习

    路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 接下来我们将按照以下目录的内容,介绍 Angular 的路由.具体目录如下: 目录 Installing the router Base href Using the router RouterModule.forRoot RouterModule.forChild Configuring a route Displaying r

  • 详解Angular路由之路由守卫

    一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由. 当用户未执行保存操作而试图离开当前导航时提醒用户. Angular提供了一些钩子帮助控制进入或离开路由.这些钩子就是路由守卫,可以通过这些钩子实现上面场景. CanActivate: 处理导航到某路由的情况. CanDeactivate: 处理从当前路由

  • 详解angular笔记路由之angular-router

    详解angular笔记路由之angular-router

    本文介绍了angular笔记路由之angular-router,分享给大家,具体如下: 创建项目 ng new router --routing \\ 加routing参数 \\ 会新增一个app-routing.module.ts 文件 路由的基本使用 名称 简介 Routes 路由的配置,保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示 RouterOutler 在HTML中标记路由内容呈现的占位符指令 Router 运行时执行的路由对象,可以通过navigate(

  • 详解Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im

  • 详解Angular4 路由设置相关

    1.路由相关配置 路由类设置 /*路由基本模型*/ /*导入RouterModule,Routes类型*/ import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from "./login/login.component"; /*定义路由const表示不可改变*/ const routers: Routes = [ /* path:字符串,表示默认登入, path为路径 /lo

  • 对angular4子路由&辅助路由详解

    子路由学习笔记: 子路由和路由一样的配置方法,都是声明好路由的入口,路由的路径,路由的出口,不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路由且可以无限循环嵌套. 路由入口:需要注意的是在子路由的入口处不能再用/来跟路径名,/会告诉angular去找跟组件,就会找到跟组件对应的模块,子路由需要用./ 1.设置根路由入口:在模板(html)上设置,路由入口就是点击哪里开始路由到新组件(点击首页到首页去) <a [routerLink]="['/']">主

  • Angular4表单验证代码详解

    Angular4表单验证代码详解

     背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe

  • vue系列之动态路由详解【原创】

    vue系列之动态路由详解【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新

  • VUE+elementui面包屑实现动态路由详解

    我的路由: const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', children: [ { path: 'dashboard', component: () => import('@/view/dashboard'), name: 'Dashboard', meta: { title: 'dashboard', icon: 'dashboard', noCache

  • Angular2之二级路由详解

    写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本. 1的版本更多的是整合,按照模块来区分,并没有做更细的划分,而2的版本中,在创建时模块组件时就已经有了很好的区分,每个模块单独管理各自的组件,在组件中也是各自管理自己的样式,效果. 在以往1的版本中,要整合路由是十分容易的,无论是一级或者二级路由都可以写在一个文件中 但是在2中则是将路由写在上层模块中,一般app为主模块,定义一个app-routing.module.ts的主路由. 基本的Angular 2 入门在前面一

  • React中react-redux和路由详解

    React中react-redux和路由详解

    目录 观察者模式解决组件间通信问题 react-redux connect方法 Provider组件 路由 使用路由 默认路由 路由重定向 获取路由参数 路由导航 观察者模式解决组件间通信问题 使用观察者解决组件间通信,分成两步 在一个组件中,订阅消息 在另一个组件中,发布消息 发布消息之后,订阅的消息回调函数会执行,在函数中,我们修改状态,这样就可以实现组件间通信了.这就是reflux框架的实现. react-redux redux早期被设计成可以在各个框架中使用,因此在不同的框架中使用的时候

  • spring boot中使用RabbitMQ routing路由详解

    spring boot中使用RabbitMQ routing路由详解

    在上一个教程中我们创建了一个扇形(fanout)交换器.我们能把消息已广播的形式传递给多个消费者. 要做什么?Routing 路由 在这个教程中,添加一个新的特性,我们可以只订阅消息的一部分.例如,将只连接我们感兴趣的颜色("orange", "black", "green"),并且把消息全部打印在控制台上. 绑定 交换器和队列是一种绑定关系.简单的理解为:队列对来自这个交换器中的信息感兴趣. 绑定可以加上一个额外的参数routingKey.Sp

  • Angular4.0动画操作实例详解

    Angular4.0动画操作实例详解

    本文实例讲述了Angular4.0动画操作.分享给大家供大家参考,具体如下: 粗略的记录一下angular4的动画 先看一下angular中文网关于这个给的例子. 有两个组件home,about. 路径配置什么的这里就不细说了,之前的博文有说过,我就贴一下代码,很好理解的, 需要import的东西我先说一下,我只贴了使用动画要用的东西,其他的我省略了, app.module.ts import { BrowserModule } from '@angular/platform-browser';

  • AngularJS 路由详解和简单实例

    AngularJS 路由详解和简单实例

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

  • ASP.NET Core Razor 页面路由详解

    在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中,ASP.NET团队就是这样实现的. 关于 Razor 页面框架如何将 URL 与文件相匹配,有一些规则您必须了解,以及如何根据需要自定义规则改变输出的结果.如果您将 Razor 页面与 Web Form 框架进行比较,您还需要了解取代的 Ur l参数以及在URL中传递数据的机制. 规则一,Razor

随机推荐