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>

复制代码