Angular4 step by step.3

本文详细介绍了Angular应用中路由模块的配置方法,包括不同路径对应组件的设置,以及使用RouterModule进行模块化管理的具体实现。

1.Routes 路由模块

 1 import { NgModule }             from '@angular/core';
 2 import { RouterModule, Routes } from '@angular/router';
 3 
 4 import { DashboardComponent }   from './dashboard.component';
 5 import { HeroesComponent }      from './heroes.component';
 6 import { HeroDetailComponent }  from './hero-detail.component';
 7 
 8 const routes: Routes = [
 9   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
10   { path: 'dashboard',  component: DashboardComponent },
11   { path: 'detail/:id', component: HeroDetailComponent },
12   { path: 'heroes',     component: HeroesComponent }
13 ];
14 
15 @NgModule({
16   imports: [ RouterModule.forRoot(routes) ],
17   exports: [ RouterModule ]
18 })
19 export class AppRoutingModule {}
View Code

2.路由模块还是蛮绕的,看了2天

3.

4.哇哈哈截图留念

 

转载于:https://www.cnblogs.com/welanshan/p/7349669.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值