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子路由辅助路由相关推荐

Angular4 第三章（中）重定向路由，子路由，辅助路由
1.重定向路由配置 const routes:Routes = [ {path:'', redirectTo: '/home', pathMatch:'full'}, {path:'home', co ...
angular4 辅助路由
1.辅助路由 2. 创建chat组件 ng g component chat 3. 组件html css: 1 2 3 4 5 6 7 .chat{ background:green; hei ...
Angular 4 辅助路由
1.辅助路由 2. 创建chat组件 ng g component chat 3. 组件html css: 1 2 3 4 5 6 7 .chat{ background:green; hei ...
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
原因:当路由地址发生变化时,想要对应的高亮显示的菜单项发生变化,只需要设置 :default-active="$route.path"即可,但是当跳转的路由(父路由)包含子路由(即 ...
前端学习（2413）：关于有默认子路由的路由name
Angular4 - 路由
Angular4 - 路由 1. 简单问题单页面程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScript 和 CSS.用hash的变化从而可以实现推动 ...
angular4 入门
笔记来源于慕课网视频https://coding.imooc.com/class/chapter/94.html#Anchor 老师 JoJozhai 纳斯达克上市公司 ...
Angular路由——子路由
一.子路由语法: 二.实例在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 n ...
vue2理论学习（全套教程，包含vuex、路由等）
文章目录一. vue基础 1. vue的介绍 1.1 vue的特性 1.2 MVVM 1.3 vue数据代理 1.3.1 Object.defineproperty() 1.3.2 数据代理 2. ...

angular4子路由辅助路由

angular4子路由辅助路由相关推荐

最新文章

热门文章