首页 > 其他 > 详细

Angular 使用总结(五)路由

时间:2020-03-22 18:06:10      阅读:59      评论:0      收藏:0      [点我收藏+]

常常需要切换多页面,因此需要路由

 

1.定义一份文件,专门用来配置各个路径跳转后的组件,一个组件就代表一个页面

import { NgModule }             from ‘@angular/core‘;
import { RouterModule, Routes } from ‘@angular/router‘;
import { SimpleTestComponent } from ‘./simple-test/simple-test.component‘;
import { MyTestComponent } from ‘./my-test/my-test.component‘;

const routes: Routes = [
    { path: ‘‘, redirectTo: ‘/simple‘, pathMatch: ‘full‘ },
    { path: ‘simple‘, component: SimpleTestComponent },
    { path: ‘test/:myParam‘, component: MyTestComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

 

2. app module 里面引用它

技术分享图片

 

 3. 根页面放置一个路由元素及一些跳转的测试链接

技术分享图片

 

 

4. 现在可以切换页面

技术分享图片

 

 技术分享图片

 

 

注:页面可以获取跳转过来传递的参数:

技术分享图片

 

 参数名定义注意一下:

技术分享图片

 

Angular 使用总结(五)路由

原文:https://www.cnblogs.com/chenyingzuo/p/12546867.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!