angularjs4+(11)父子路由

1 创建组件addnews

ng g component zujian/addnews

2 我想让http://localhost:4200/news/add能访问到news的子路由addnews,路由配置app-routing.module.ts如下:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from './zujian/home/home.component';
import {NewsComponent} from './zujian/news/news.component';
import {NewscontentComponent} from './zujian/newscontent/newscontent.component';
import { AddnewsComponent } from './zujian/addnews/addnews.component';//引入组件
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent,
//配置子路由
    children:[{
      path:'add',
      component:AddnewsComponent
      }]

},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
      path: '**',/*匹配不到的任意的路由*/
      redirectTo: '/home',
      pathMatch: 'full'
    } 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3 news.component.html加上:

<router-outlet></router-outlet>
发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>