angular4子路由&辅助路由

时间：2022-09-05 18:33:22

子路由学习笔记：

子路由和路由一样的配置方法，都是声明好路由的入口，路由的路径，路由的出口，不一样的是自路由是嵌套在副路由里面的并且由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>






标签：

相关文章