angular路由详解一（基础知识）
本人原来是iOS开发，没想到工作后，离iOS开发原来越远，走上了前端的坑。一路走来，也没有向别人一样遇到一个技术上的师傅，无奈只能一个人苦苦摸索。如今又开始填angular的坑了。闲话不扯了。（本人学习是根据官网教程，如果想根据官网教程学习，我建议先把官网的例子先学一遍，路由的路基部分，都是根据这个例子来讲的）。https://www.angular.cn/（官网地址）本章部分基本是官网的内容。
基础知识
1.应用的开始都会有一个根目录开始，路由也一样，所以使用路由就在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。
2.在app.module.ts文件中导入需要的路由模块，记得把路由的组件也要导入进来。
3.配置路由
在@ngModule()上边创建路由数组
//path 路径参数(不能以/开头，路由会自己添加)，component是组件（也就是你要导航的目的页面）redirectTo：重定向 pathMath: 来告诉路由器如何用
URL去匹配路由的路径，** 通配符，当前面所有的路由都找不到的时候就会路由到这个组件
const routes: Routes = [
{path:'home', component:HomeComponent },
{ path: 'hero/:id', component: HeroDetailComponent },//带参数的路由
{path:' ', redirectTo:' ', pathMath:‘full'}，
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes
)
]
})
4.在组件中创建路由出口
在需要路由的HTML页面，留下路由出口。例如app.component.html
<router-outlet></router-outlet>
5.路由链接（也就是点击跳转）。例如在app.component.html中
<h1>Angular Router</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Crisis Center</a>
</nav>
<router-outlet></router-outlet>
这样就完成了一个简单的页面路由。
喜欢的朋友填个关注，点个赞给个小小的鼓励。
angular路由详解一（基础知识）的更多相关文章
- Linux dts 设备树详解(一) 基础知识
Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 1 前言 2 概念 2.1 什么是设备树 dts(device tree)? 2. ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- java中文乱码解决之道（二）-----字符编码详解：基础知识 + ASCII + GB**
在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...
- java中文乱码解决之道（二）—–字符编码详解：基础知识 + ASCII + GB**
原文出处:http://cmsblogs.com/?p=1412 在上篇博文(java中文乱码解决之道(一)—–认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述 ...
- angular路由详解六（路由守卫）
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- angular路由详解四（子路由）
子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...
- angular路由详解五（辅助路由）
在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet name="aux& ...
- angular路由详解三（路由参数传递）
我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"} => address/1 => Activa ...
- vue技术栈进阶（02.路由详解—基础）
路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由
随机推荐
- Mysql字符串截取总结：left()、right()、substring()、substring_index()
同步首发:http://www.yuanrengu.com/index.php/20171226.html 在实际的项目开发中有时会有对数据库某字段截取部分的需求,这种场景有时直接通过数据库操作来实现 ...
- Ubantu16.04 redis安装
通过FTP方式将redis的安装包从windows上传到linux上 解压命令:$sudo tar -zxf ~/Downloads/redis-3.2.7.tar.gz -C /usr/local ...
- SpringMvc文件资源防止被外链链接
/** * 文件下载防止文件被别的网站引用 * 直接访问会访问不了 * @Description: * @param type * 文件后缀名 * @param fileName * 文件名 * @p ...
- Java集合框架（四）—— Queue、LinkedList、PriorityQueue
Queue接口 Queue用于模拟了队列这种数据结构,队列通常是指“先进先出”(FIFO)的容器.队列的头部保存在队列中时间最长的元素,队列的尾部保存在队列中时间最短的元素.新元素插入(offer)到 ...
- length()方法，length属性和size()的方法的区别
length()方法,length属性和size()的方法的区别: length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方法: length属性是针对Java中的数 ...
- POJ - 3414 bfs [kuangbin带你飞]专题一
状态搜索,每种状态下面共有六种选择,将搜索到的状态保存即可. d[i][j]表示状态A杯中水i升,B杯中水j升,总状态数量不会超过A杯的容量 * B杯的容量. AC代码 #include<cst ...
- SQL中partition关键字的使用
最近在写后台语句时候,运用到了partition这样一个关键字. 先大致说一下背景,有一种数据表,如下 现在需要取出,每一个人最近的一次打卡时间. 思路是,先把数据按照人名分组,然后在每个组里面按照时 ...
- Conditional Random Fields (CRF) 初理解
1,Conditional Random Fields
- 校园网IPv6加速
对于广大学生来说,上网是一件很纠结的事情,校园网要么按时间计费,要么按流量计费,要么是校园宽带.按时间计费速度慢,按流量计费费用高,校园宽带还不能共享,只能电脑开热点给手机上网.有没有既能提高网速又经 ...
- Alice and Bob HDU - 4268
Alice and Bob's game never ends. Today, they introduce a new game. In this game, both of them have N ...