PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 812|回复: 0

Angularjs4.0命令创建一个配置好路由的项目

[复制链接]

40

主题

73

帖子

306

积分

中级会员

Rank: 3Rank: 3

积分
306
发表于 2017-8-11 11:15:17 | 显示全部楼层 |阅读模式
本帖最后由 幽梦林子 于 2017-8-11 11:38 编辑

Angularjs4.0如何命令创建一个配置好路由的项目呢?请看以下介绍:1.命令创建项目

  1. ng new demo02 –-routing
复制代码

详细代码请看最下方图片。


2.创建需要的组件

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



3.找到app-routing.module.ts 配置路由

引入组件
  1. import { HomeComponent } from './home/home.component';
  2. import { NewsComponent } from './news/news.component';
  3. import { NewscontentComponent } from './newscontent/newscontent.component';
复制代码


配置路由

  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. ];
复制代码



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


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

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





66.png
回复

使用道具 举报

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

本版积分规则

关闭

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

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

GMT+8, 2018-7-19 00:29 , Processed in 0.363662 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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