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的路由例子的更多相关文章

  1. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...

  2. angular -- ng-ui-route路由及其传递参数?script标签版

    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...

  3. angular 之路由

    1.用angular-cli建一个工程自带路由怎么做? 命令:ng new  项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...

  4. angular 前端路由不生效解决方案

    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...

  5. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  6. angular的路由跳转,的监听$rootScope.$on

    使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...

  7. angular的路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...

  8. angular中路由的实现(针对新手)

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

  9. 关于Iscroll.js 的滑动和Angular.js路由冲突问题

    Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...

随机推荐

  1. Ecshop 2.x-3.x RCE漏洞复现

    说是复现,其实来源于一道CTF题目(Ecshop3.x RCE) 链接:http://www.whalwl.cn:8030 1. 漏洞概述 ECShop的user.php文件中的display函数的模 ...

  2. php7新增的两个操作符---null合并及飞船操作符

    <?php //null合并操作符?? //(太空)飞船操作符<=> //The operator returns 0 if both operands are equal, 1 i ...

  3. go mod 使用

    go modules 是 golang 1.11 新加的特性.现在1.12 已经发布了,是时候用起来了.Modules官方定义为: 模块是相关Go包的集合.modules是源代码交换和版本控制的单元. ...

  4. java 的枚举变量只能使用枚举常量来初始化--带有关联数据的枚举

    public enum ResultEnum { SUCCESS("200","成功"), FAILURE("500","发生异常 ...

  5. windows使用 xxx.bat运行相关指令

    今日思语:成人的世界,请停止低层次的忙碌 一般是windows上需要执行一些支持的命令时,我们一般都会直接使用控制台去操作,对于需要频繁操作的指令来说,使用控制台略显有些不便,比如不小心关闭后控制台后 ...

  6. LeetCode 499. The Maze III

    原题链接在这里:https://leetcode.com/problems/the-maze-iii/ 题目: There is a ball in a maze with empty spaces ...

  7. eslint Cannot read property 'range' of null错误

    eslint Cannot read property 'range' of null错误   手动添加的配置,2个项目OK,还个项目 运行报错 Cannot read property 'range ...

  8. 【转】为什么我们做分布式使用Redis?

    绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对 Redis 常见问题做一个总结,解决 ...

  9. SDOI 2014 向量集

    [SDOI2014]向量集 题目描述 维护一个向量集合,在线支持以下操作: - "A x y (|x|,|y| < =10^8)":加入向量(x,y); - " Q ...

  10. A@G!C005

    AGC005 A STring 不会,有没有老鸽蕉蕉我/kk/kel/dk https://agc005.contest.atcoder.jp/submissions/7926986 B Minimu ...