angular的路由例子
app.routing.module.ts里面,关键部分
const routes: Routes = [
{ path: '', redirectTo : 'c3/c2/mmc', pathMatch: 'full'},
{ path: 'c3', component: C3Component,
children: [
{ path: 'c2/:name', component: C2Component},
]
},
{ path: '**', component: ErrorComponent}
];
C2Component关键部分
export class C2Component implements OnInit {
// tslint:disable-next-line:variable-name
private _router: ActivatedRoute
constructor(router: ActivatedRoute) {
this._router = router;
}
ngOnInit() {
let name = this._router.snapshot.params["name"];
let queryId = this._router.snapshot.queryParams["id"];
console.log(name, queryId);
}
}
c3.component.html里面关键部分
<h1>c3 page</h1>
<!--下面这个一定要写,否则会无法渲染子路由组件-->
<router-outlet></router-outlet>
测试连接地址
http://localhost:4200/c3/c2/aaa?id=123234
angular的路由例子的更多相关文章
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
- angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- angular 之路由
1.用angular-cli建一个工程自带路由怎么做? 命令:ng new 项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- angular的路由跳转,的监听$rootScope.$on
使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...
- angular的路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...
- angular中路由的实现(针对新手)
最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...
随机推荐
- Ecshop 2.x-3.x RCE漏洞复现
说是复现,其实来源于一道CTF题目(Ecshop3.x RCE) 链接:http://www.whalwl.cn:8030 1. 漏洞概述 ECShop的user.php文件中的display函数的模 ...
- php7新增的两个操作符---null合并及飞船操作符
<?php //null合并操作符?? //(太空)飞船操作符<=> //The operator returns 0 if both operands are equal, 1 i ...
- go mod 使用
go modules 是 golang 1.11 新加的特性.现在1.12 已经发布了,是时候用起来了.Modules官方定义为: 模块是相关Go包的集合.modules是源代码交换和版本控制的单元. ...
- java 的枚举变量只能使用枚举常量来初始化--带有关联数据的枚举
public enum ResultEnum { SUCCESS("200","成功"), FAILURE("500","发生异常 ...
- windows使用 xxx.bat运行相关指令
今日思语:成人的世界,请停止低层次的忙碌 一般是windows上需要执行一些支持的命令时,我们一般都会直接使用控制台去操作,对于需要频繁操作的指令来说,使用控制台略显有些不便,比如不小心关闭后控制台后 ...
- LeetCode 499. The Maze III
原题链接在这里:https://leetcode.com/problems/the-maze-iii/ 题目: There is a ball in a maze with empty spaces ...
- eslint Cannot read property 'range' of null错误
eslint Cannot read property 'range' of null错误 手动添加的配置,2个项目OK,还个项目 运行报错 Cannot read property 'range ...
- 【转】为什么我们做分布式使用Redis?
绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对 Redis 常见问题做一个总结,解决 ...
- SDOI 2014 向量集
[SDOI2014]向量集 题目描述 维护一个向量集合,在线支持以下操作: - "A x y (|x|,|y| < =10^8)":加入向量(x,y); - " Q ...
- A@G!C005
AGC005 A STring 不会,有没有老鸽蕉蕉我/kk/kel/dk https://agc005.contest.atcoder.jp/submissions/7926986 B Minimu ...