Angularjs4.0 路由配置
Angularjs4.0如何自己创建路由呢,Angularjs4.0 路由如何配置?具体操作需要以下几个步骤:1.新建app-routing.module.ts,以及新建几个组件
ng g component home
ng g component news
ng g component newscontent
2.引入模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
3.引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
4.配置组件
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
5.配置模块 暴露模块
@NgModule({
imports: ,
exports:
})
export class AppRoutingModule { }
6.在app.module.ts 引入刚才定义的路由
import { AppRoutingModule } from './app-routing.module';
7.app.module.ts里面的import注册这个路由模块
imports: [
BrowserModule,
AppRoutingModule
<font size="3"><b>]</b></font>
a)找到app.component.html根组件模板,配置router-outlet显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
页:
[1]