app.routing.module.ts里面,关键部分

  1. const routes: Routes = [
  2. { path: '', redirectTo : 'c3/c2/mmc', pathMatch: 'full'},
  3. { path: 'c3', component: C3Component,
  4. children: [
  5. { path: 'c2/:name', component: C2Component},
  6. ]
  7. },
  8. { path: '**', component: ErrorComponent}
  9. ];

C2Component关键部分

  1. export class C2Component implements OnInit {
  2. // tslint:disable-next-line:variable-name
  3. private _router: ActivatedRoute
  4.  
  5. constructor(router: ActivatedRoute) {
  6. this._router = router;
  7. }
  8.  
  9. ngOnInit() {
  10. let name = this._router.snapshot.params["name"];
  11. let queryId = this._router.snapshot.queryParams["id"];
  12. console.log(name, queryId);
  13. }
  14. }

c3.component.html里面关键部分

  1. <h1>c3 page</h1>
  2. <!--下面这个一定要写,否则会无法渲染子路由组件-->
  3. <router-outlet></router-outlet>

测试连接地址

  1. 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. Docker搭建Redis

    1.拉取redis镜像: docker pull redis 2.创建容器: docker run -d --restart=always -v /opt/redis/data:/data --nam ...

  2. free - 显示系统内存信息

    free - Display amount of free and used memory in the system 显示系统中空闲和已使用内存的数量 格式: free [options] opti ...

  3. phpstorm webstorm编辑器正则替换 类名,方法名替换

    首先勾选Match Case 和 Regex 正则规则:无须添加//左右分解符,直接写正则表达式,注意应该转义的部分,需要原封不动替换的部分加上括号 替换规则:正常书写正则,要继承下来的字符使用$1. ...

  4. 详解Linux操作系统的进程

    系统 计算机运行起来以后,就是由内核和运行在内核之上的众多进程来实现的(kernel+process) 内存分为 :    线性内存: 物理内存: 计算机的所有运行都只在内存和CPU中运行! 内核空间 ...

  5. .NET Core中Quartz.NET的依赖注入

    目录 介绍 项目概况 创建配置文件 使用构造函数注入 使用选项模式 结论 介绍 Quartz.NET是一个方便的库,允许您通过实现IJob接口来安排重复任务.然而,它的局限性在于,默认情况下,它仅支持 ...

  6. Element布局实现日历布局

    1.基于Bootstrap的栅格布局 <div id="home" style="margin-top: 60px;"> <div class ...

  7. Mysql 行锁 for update

    Mysql 只有Innodb支持行锁 使用行锁需要 事务支持 首先打开两个 mysql-client 分别执行 - client1 select * from my_entity1 for updat ...

  8. 【Postgres】根据字段数据创建空间字段

    --添加空间字段 , ); --根据其他字段更新空间字段数据 update "GIS" b ) from "GIS" a where b."ID&qu ...

  9. Windows Automation API和自动化测试

    https://zhuanlan.zhihu.com/p/22083601\ 感谢轮子哥点赞,这会儿消息扎堆过来了,轮带逛果然不是随便说说的…… 第二篇一个简单的Windows Automation ...

  10. 学习:简单使用MFC创建对话框窗口

    MFC介绍:微软基础类库(英语:Microsoft Foundation Classes,简称MFC)是微软公司提供的一个类库(class libraries),以C++类的形式封装了Windows ...