angular4路由设置笔记
场景说明: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路由设置笔记的更多相关文章
- golang学习笔记6 beego项目路由设置
golang学习笔记5 beego项目路由设置 前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main ...
- ICBC中的路由设置
才去的中国工商银行,用身份证叫了A0076的号,前边还有26个人,闲来无聊果断拿出手机收取wifi.有两个ssid为ICBC的路由,信道分别是1号和6号,还好不需要密码,不过一会就连接上了. 那我先上 ...
- Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致
Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致,如果参数不一致,传过去为null
- xp多网卡静态路由设置方法
xp多网卡静态路由设置方法 一.多个IP都在同一网段或VALN.这类情况没什么好说的,在各块网卡的本地连接属性里设置好IP地址.子网掩码和默认网关即可. 二.多个IP属于不同网段或VLAN.这时如果按 ...
- MVC3.0,路由设置实现伪静态IIS中404错误
C# code? 1 2 3 4 5 routes.MapRoute("NewQueryTest.asp", "NewQueryTest ...
- express中路由设置的坑-----1
router.get('/commodities/sortable', utils.logged, function (req, res) { Commodity.find({force_top:tr ...
- Sublime Text 3设置笔记
Sublime Text 3设置笔记 Sublime Text 3设置指南 1. 安装package control 下载package control源码安装包,并解压: http://yun.ba ...
- CI 路由设置
$route['news/show/(:num)']='news/show/$1'; 前边是匹配 网址 后边是 指定控制器 在application/config/文件夹下有routes.p ...
- angualr4 路由 总结笔记
使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts // app/app.router.ts // 将文件修改为 im ...
随机推荐
- Ocelot(三)- 服务发现
Ocelot(三)- 服务发现 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10907856.html 源码地址:https ...
- [Xcode 实际操作]五、使用表格-(6)UITableView滑动到指定单元格
目录:[Swift]Xcode实际操作 本文将演示如何使表格滑动到指定的索引路径. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...
- 在mac上使用sublime text3搭建opencv3开发环境
安装sublime text3 打开mac终端,安装brew 安装opencv3,终端输入下面的coomand: brew install opencv@3 注意:@3表示安装的版本,如果不加@3,那 ...
- Redis数据类型,持久化,回收策略——(Redis缓存第一章)
缓存:第一种是内存缓存 比如Map(简单的数据结构),以及EH Cache(Java第三方库),第二种是缓存组件比如Memached,Redis:Redis(remote dictionary ser ...
- Git练习2 使用码云
- JMeter - 后处理器/脚本语言 - 比较
当我们使用JMeter / Response数据处理进行密集负载测试时,我们可能会非常小心我们选择的后处理器/脚本语言的类型.在这篇文章中,我想说明这些后处理器/脚本语言如何影响测试的整体性能. 我们 ...
- webpack前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...
- Windows开机自动登录及取消自动登录的设置
开机自动登录 1.开始菜单搜索框输入 “netplwiz” 按回车 或“Win+R”组合键打开“运行”框内输入“netplwiz” 或“运行”框内输入“control userpasswords2”( ...
- web.xml中监听器如何顺序加载
最近用到在Tomcat服务器启动时自动加载数据到缓存,这就需要创建一个自定义的缓存监听器并实现ServletContextListener接口, 并且在此自定义监听器中需要用到Spring的依赖注入功 ...
- D - 稳住GCD DP
http://acm.uestc.edu.cn/#/problem/show/923 给定一堆数字,求其所有数字的gcd. 现在要删除最多的数字,使得剩下的数字的gcd和原来的一样. 设dp[i][v ...