场景说明: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”

angular4路由设置笔记的更多相关文章

  1. golang学习笔记6 beego项目路由设置

    golang学习笔记5 beego项目路由设置 前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main ...

  2. ICBC中的路由设置

    才去的中国工商银行,用身份证叫了A0076的号,前边还有26个人,闲来无聊果断拿出手机收取wifi.有两个ssid为ICBC的路由,信道分别是1号和6号,还好不需要密码,不过一会就连接上了. 那我先上 ...

  3. Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致

    Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致,如果参数不一致,传过去为null

  4. xp多网卡静态路由设置方法

    xp多网卡静态路由设置方法 一.多个IP都在同一网段或VALN.这类情况没什么好说的,在各块网卡的本地连接属性里设置好IP地址.子网掩码和默认网关即可. 二.多个IP属于不同网段或VLAN.这时如果按 ...

  5. MVC3.0,路由设置实现伪静态IIS中404错误

    C# code? 1 2 3 4 5  routes.MapRoute("NewQueryTest.asp",                 "NewQueryTest ...

  6. express中路由设置的坑-----1

    router.get('/commodities/sortable', utils.logged, function (req, res) { Commodity.find({force_top:tr ...

  7. Sublime Text 3设置笔记

    Sublime Text 3设置笔记 Sublime Text 3设置指南 1. 安装package control 下载package control源码安装包,并解压: http://yun.ba ...

  8. CI 路由设置

    $route['news/show/(:num)']='news/show/$1';   前边是匹配 网址   后边是  指定控制器 在application/config/文件夹下有routes.p ...

  9. angualr4 路由 总结笔记

    使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts // app/app.router.ts // 将文件修改为 im ...

随机推荐

  1. Go:定时执行任务time.sleep和time.tick的优劣

    golang 写循环执行的定时任务,常见的有以下三种实现方式:1.time.Sleep方法: for { time.Sleep(time.Second) fmt.Println("我在定时执 ...

  2. Tomcat热部署的实现原理

    Tomcat热部署机制 对于Java应用程序来说,热部署就是在运行时更新Java类文件.在基于Java的应用服务器实现热部署的过程中,类装入器扮演着重要的角色.大多数基于Java的应用服务器,包括EJ ...

  3. 自定义标签报 无法为TAG [my2:hello]加载标记处理程序类[null]

    今天练习jsp自定义标签的时候,等我写好全部和检查万无一失的时候.执行然后报错了 无法为TAG [my2:hello]加载标记处理程序类[null] 我反复检查代码,发现代码也没什么问题.后面通过百度 ...

  4. 用户与授权:MySQL系列之六

    一.用户管理 1.用户账号 用户的账号由用户名和HOST俩部分组成('USERNAME'@'HOST') HOST的表示: 主机名 具体IP地址 网段/掩码 可以使用通配符表示,%和_:192.168 ...

  5. QPS,TPS,吞吐量,响应时间详解及关系

    并发数 并发数是指系统同时能处理的请求数量,这个也是反应了系统的负载能力 吞吐量吞吐量是指单位时间内系统能处理的请求数量,体现系统处理请求的能力,这是目前最常用的性能测试指标 响应时间RT(Respo ...

  6. 论js里面的for循环

    首先搞懂执行的顺序: 对,执行顺序就是这样的. for循环的作用: 1.在编写代码时,你常常希望反复执行同一段代码. 2.遍历数组,可以用forEach();对于DOM对象(nodelist)的话,比 ...

  7. LeetCode 148 Sort List 链表上的归并排序和快速排序

    Sort a linked list in O(n log n) time using constant space complexity. 单链表排序----快排 & 归并排序 (1)归并排 ...

  8. hadoop map 个数 源码分析

    本文转自http://ronxin999.blog.163.com/blog/static/42217920201279112163/

  9. Zookeeper启动失败:java.net.BindException: Address already in use

    错误日志如下: [hadoop@master zookeeper-3.4.5-cdh5.10.0]$ cat zookeeper.out 2018-05-15 01:29:21,036 [myid:] ...

  10. Windows下 bat调用TSql问题

    一.建立sql文件 在sql管理工具中写好sql文件,并保证能够正常运行,之后用unique编码保存. 二.建立一个bat文件osql -U登录用户 -P密码 -S服务器 <sql文件.sql ...