PhoneGap中文网

标题: Angularjs4.0 路由配置 [打印本页]

作者: 幽梦林子 时间: 2017-8-11 11:49
标题: 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: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
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>

复制代码

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)