angular--路由之子路由

子路由应用场景是在一个组件A里有两个链接,分别显示不同的子组件b和c,这两个子组件的位置在A组件中。

举例子:

比如我们在股票详情组建中显示卖家列表信息和买家列表信息,显示区域在红色框的位置。

angular--路由之子路由_第1张图片

首先我们在股票详情组件中定义两个链接和设置一个路由插座来显示子组件的位置


angular--路由之子路由_第2张图片

注意买家列表中的routerLink里不能直接写“/”,因为它会直接执行路由配置中的主页组件的路由,要写成“./ ”才能走子路由中的买家路由路径


angular--路由之子路由_第3张图片

接下来我们写下卖家列表组件中控制器的代码,由于没给买家组件传参数,所以就不用写参数接收方法了


angular--路由之子路由_第4张图片
卖家控制器中的代码

最终效果如下:


angular--路由之子路由_第5张图片
点击买家列表


angular--路由之子路由_第6张图片
点击卖家列表

看给卖家列表传的参数100显示在了路径里。

下转:angular--路由之辅助路由

你可能感兴趣的:(angular--路由之子路由)