Angular之父子路由

最新推荐文章于 2025-01-07 09:20:15 发布

weixin_33965305

最新推荐文章于 2025-01-07 09:20:15 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/aonaufly/2406503

一 : 测试设计

① , 在news组件中有newsa 和 newsb2个子组件 . 排版如下所示 :
Angular之父子路由

② , 分别创建出 news , newsa , newsb3个组件

二 : app-routing.module.ts

  {
    path:"news" , component:NewsComponent,
    children:[
      {path:"newsa" , component:NewsaComponent},
      {path:"newsb" , component:NewsbComponent},
      {
        path:"**",
        redirectTo:"newsa"
      }
    ]
  },

上面配置的意思很清楚:
① , 有一个news组件
② , news组件下面有2个子组件newsa , newsb
③ , 默认显示子组件是newsa

三 : 设计news组件的html

<div class="content">
  <div class="left">
    <a [routerLink]="['/news/newsa']" [routerLinkActive]="['active']">newsa</a>
    <br>
    <br>
    <a [routerLink]="['/news/newsb']" [routerLinkActive]="['active']">newsb</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

注意:
① , routerLink的写法 , 既然newsa/newsb为news的子组件 , 那么必须写成/news/newsa或者/news/newsb.这个和路由配置是对应的
Angular之父子路由
② , 想要在<div class="right"></div>中显示newsa/newsb组件,必须在其中加入: