PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 215|回复: 0

Angularjs4.0 路由配置

[复制链接]

37

主题

61

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 2017-8-11 11:49:26 | 显示全部楼层 |阅读模式
Angularjs4.0如何自己创建路由呢,Angularjs4.0 路由如何配置?具体操作需要以下几个步骤:


1.新建app-routing.module.ts,以及新建几个组件

  1. ng g component home
  2. ng g component news
  3. ng g component newscontent
复制代码



2.引入模块

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
复制代码



3.引入组件

  1. import { HomeComponent } from './home/home.component';
  2. import { NewsComponent } from './news/news.component';

  3. import { NewscontentComponent } from './newscontent/newscontent.component';
复制代码



4.配置组件

  1. const routes: Routes = [

  2.   {path: 'home', component: HomeComponent},
  3.   {path: 'news', component: NewsComponent},
  4.   {path: 'newscontent/:id', component: NewscontentComponent},
  5.   {
  6.     path: '',
  7.     redirectTo: '/home',
  8.     pathMatch: 'full'
  9.   }
  10.   
  11. ];
复制代码



5.配置模块 暴露模块


  1. @NgModule({
  2.   imports: [RouterModule.forRoot(routes)],
  3.   exports: [RouterModule]
  4. })
  5. export class AppRoutingModule { }
复制代码



6.在app.module.ts 引入刚才定义的路由

  1. import { AppRoutingModule } from './app-routing.module';
复制代码



7.app.module.ts里面的import注册这个路由模块

  1. imports: [
  2.     BrowserModule,
  3.     AppRoutingModule
  4. <font size="3"><b>  ]</b></font>
复制代码


a)找到app.component.html根组件模板,配置router-outlet显示动态加载的路由

  1. <h1>
  2.   <a routerLink="/home">首页</a>
  3.   <a routerLink="/news">新闻</a>
  4. </h1>

  5. <router-outlet></router-outlet>
复制代码




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-1-16 23:45 , Processed in 0.250749 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表