angularjs辅助路由

2019-02-21  本文已影响0人  小刚_4a64

辅助路由的语法分为三步

1,页面插座的,也就是路由的出口声明一个带有name的路由插座,如下:

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

2,路由的配置,在app-routing-module.ts路由的配置文件中进行配置,名为aux的辅助路由可以用来显示xxx组件,如下:

{path:'xxx',component:XxxComponent,outlet:'aux'},

3,链接中用路由参数控制路由的跳转,primary用来控制主路由,如下:不管那个页面,点击后主路由都会显示home组件。

<a [routerLink]="[{outlets:{primary:'home',aux:'xxx'}}]">路由的链接</a>

辅助路由代码示例:

1,主组件中有四个链接,主页,产品,common,分别链接这三个组件,声名一个辅助路由名为aux

2,路由的配置

3,通过aux参数来控制显示和关闭common组件

注: primary 这个参数是用来控制,当显示辅助路由组件common时,主路由都会跳转到home组件。

上一篇下一篇

猜你喜欢

热点阅读