angular4路由设置笔记
2024-10-21 12:39:53
场景说明:angular4开发的一个后台项目
一、可以使用angular-cli
创建一个带路由的项目,ng new 项目名称 --routing
会多创建一个app-routing.module.ts
文件代码如下:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [
{
path: '',
children: []
}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
二、手动配置路由文件
在app
文件夹下面创建一个app.router.ts
文件,基本结构代码如下:
angular路由中涉及到很多新单词词汇
单词 | 说明 | 使用场景 |
---|---|---|
Routes | 配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 | |
RouterOutlet | 在html中标记挂载路由的占位容器 | |
Router | 在ts文件中负责跳转路由操作 | Router.navigate([“/xxx”]),Router.navigateByUrl(“/xxx”) |
routerLink | 在html中使用页面跳转 | <a [routerLink]="['/xx']" |
routerLinkActive | 表示当前激活路由的样式 | routerLinkActive=”active” |
ActivedRoute | 获取当前激活路由的参数, | 这个是一个类,要实例化,使用实例化后的对象.params,xx.queryParams |
redirectTo | 重定向 | redirectTo=”/路径” |
useHash | 使用哈希值展现 | {useHash:true} |
pathMatch | 完全匹配 | pathMatch:”full” |
最新文章
- Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
- css_随笔
- 带蒙版的提交loading页面实现
- 让Response.Redirect页面重定向更有效率
- [Ljava.lang.String和java.lang.String区别
- linux下的inode记录
- [转]面向GPU的多LOD因子的大规模场景可视化策略
- CSS Sprites图片处理
- 使用Boost asio实现同步的TCP/IP通信
- 在 Android 的 IM 应用中使用 asmack 库实现用户头像的传输(基于VCard协议)
- 协程与Epoll的配合
- 010 处理模型数据(ModelAndView,Map Model,@SessionAttributes)
- SQL Server 数值四舍五入,小数点后保留2位
- Codeforces Round #546 (Div. 2) E - Nastya Hasn&#39;t Written a Legend
- 在命令行中运行JUnit测试
- 彻底关闭window10 专业版 企业版 windows defender
- java通过经纬度计算两个点的之间的距离的算法
- 网络协议-HTTPS
- bzoj 一些题目汇总
- mysql>; set sql_mode=&#39;&#39;; mysql>; set sql_mode=&#39;traditional&#39;;
热门文章
- python之03编码学习
- 暴风魔镜SDK:MojingSDK For Unity V1.3.5112 (R).zip
- 消息队列RabbitMQ、缓存数据库Redis
- ImportError: /lib64/libc.so.6: version `GLIBC_2.17&#39; 问题解决
- 离散数学——python实现真值表和打印主范式
- Gym 100886J Sockets 二分答案 + 贪心
- Java面向对象_常用类库api——日期操作类
- OpenStack git cmd
- Storm概念学习系列之storm-starter项目(完整版)(博主推荐)
- 5 - 参考函数-API