Angular之父子路由-创新互联

一 : 测试设计

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

创新互联公司2013年至今，公司以做网站、成都网站设计、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户近千家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

② , 分别创建出 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.这个和路由配置是对应的

② , 想要在

中显示newsa/newsb组件,必须在其中加入:

四 : 结果

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

标题名称：Angular之父子路由-创新互联
分享URL：http://bjjierui.cn/article/dpcpec.html