PhoneGap中文网

标题: Angularjs4.0命令创建一个配置好路由的项目 [打印本页]

---

作者: 幽梦林子    时间: 2017-8-11 11:15
标题: Angularjs4.0命令创建一个配置好路由的项目


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. 
   
2. const routes: Routes = [
   
3. 
   
4.   {path: 'home', component: HomeComponent},
   
5.   {path: 'news', component: NewsComponent},
   
6.   {path: 'newscontent/:id', component: NewscontentComponent},
   
7.   {
   
8.     path: '',
   
9.     redirectTo: '/home',
   
10.     pathMatch: 'full'
    
11.   }  
    
12. ];

复制代码

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

1. 
   
2. <h1>
   
3.   <a routerLink="/home">首页</a>
   
4.   <a routerLink="/news">新闻</a>
   
5. </h1>
   
6. 
   
7. <router-outlet></router-outlet>

复制代码

66.png (81.85 KB, 下载次数: 433)

下载附件

2017-8-11 11:29 上传

---

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

Powered by Discuz! X3.2