angular 中父子路由

1. 创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';

2. 配置路由

{
    path: 'news',
    component:NewsComponent,
    children: [
     {
       path:'newslist',
       component:NewslistComponent
}, {
       path:'newsadd',
       component:NewsaddComponent
} ]
}

3. 父组件中定义 router-outlet

 <router-outlet></router-outlet>

  如：

 

 <div class="content">

   <div class="left">
 
 
 
       <a [routerLink]="[ '/home/homechild1']" routerLinkActive="active">   homechild1</a>
 
       <br>
 
       <br>
       <a [routerLink]="[ '/home/homechild2']" routerLinkActive="active">   homechild2</a>
 
   </div>
 
   <div class="right">
 
     <router-outlet></router-outlet>
 
   </div>
 
 </div>
 
 

注意：子路由前要加父路由路径