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操作路由
随机推荐
- 使用腾讯云“自定义监控”监控GPU使用率
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:李想 随着人工智能以及比特币的火热,GPU云服务的使用场景是越来越广,在很多场景下我们也需要获取GPU服务器的性能参数来优化程序的执行.目 ...
- eclipse快捷注释生成方法
自动生成方法的注释格式,例如 /*** @param str* @return* @throws ParseException*/ 快捷键是alt+shift+j,将光标放在方法名上,按快捷键.会生成 ...
- 深入java虚拟机学习 -- 类的加载机制(续)
昨晚写 深入java虚拟机学习 -- 类的加载机制 都到1点半了,由于第二天还要工作,没有将上篇文章中的demo讲解写出来,今天抽时间补上昨晚的例子讲解. 这里我先把昨天的两份代码贴过来,重新看下: ...
- linux 获取CPU个数
#include<stdio.h> #include<unistd.h> int main() { int cpu_num; cpu_num = sysconf(_SC_NPR ...
- 在Ubuntu上安装PHPStudy组件
phpStudy for Linux (lnmp+lamp一键安装包) phpStudy Linux版&Win版同步上线 支持Apache/Nginx/Tengine/Lighttpd/IIS ...
- Mysql利用存储过程插入400W条数据
CREATE TABLE dept( /*部门表*/ deptno MEDIUMINT UNSIGNED NOT NULL DEFAULT 0, /*编号*/ dname VARCHAR(20) NO ...
- java并发 - 自底向上的原理分析
[TOC] 事先声明,我只是java并发的新手,这篇文章也只是我阅读<java并发编程的艺术>一书(内容主要涉及前3章)的一些总结和感悟.希望大家能多多讨论,对于错误的地方还请指出. 0. ...
- poj1011 && uva307 DFS + 剪枝
将木棒从大到小排列,保证每次的选择都是最长可选的木棒. 剪枝: 1 . 如果第 i 根木棒被选择却无法成功拼接,那么后面与其长度相同的也不能选择. 2 . 如果第 cnt + 1 根木棒无法成功拼接, ...
- sed 命令多行到多行的定位方式
本文提要: sed 命令定位方式的分类 着重对 /pattern/,/pattern/ 的定位方式进行阐述 定位方式分类 总体上,只需要分为两类,即:x 和 x,y .如果在范围后加 ! 则表示取补集 ...
- DTCMS插件的制作实例电子资源管理（四）URL重写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...