一 : 测试设计
① , 在news组件中有newsa 和 newsb2个子组件 . 排版如下所示 :
② , 分别创建出 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.这个和路由配置是对应的
<router-outlet></router-outlet>
四 : 结果
原文地址:https://blog.51cto.com/aonaufly/2406503
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。