一 : 测试设计

① , 在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

    
  
     
    
      newsa    
      
    
      
    
      newsb  
     
  
     
    
        
     
    

注意:

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

四 : 结果