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>