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. 【漏洞复现】Apache Solr via Velocity template远程代码执行

    0x01 概述 Solr简介 Apache Solr 是一个开源的企业级搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr ...

  2. python实现系统调用cmd命令的模块---subprocess模块

    如果要python实现系统命令或者调用脚本,python中可以利用os或者subprocess模块实现: 一.os模块: # coding:utf-8 command = os.system('net ...

  3. jmap错误:unknown CollectedHeap type : class sun.jvm.hotspot.gc_interface.CollectedHeap

    原文:https://www.jianshu.com/p/0e5d8db8ed5e 错误场景 今天使用jmap -heap命令查看堆的详细信息报错. [root@instance-2gak1pfv d ...

  4. C++学习(7)—— 函数提高

    1. 函数默认参数 在C++中,函数的形参列表中的形参是可以有默认值的 语法:返回值类型 函数名 (参数=默认值){} 注意 如果某个位置已经有了默认参数,那么从这个位置往后,从左到右都必须有默认值 ...

  5. FFLIB

    用于分布式程序的c++类库,封装了socket.rpc.lua.CQRS框架.算法等组件,适于SNS.WEBGAME.MMO后台程序, about C++,linux https://github.c ...

  6. 点击一个超链接,弹出固定大小的新窗口(js实现)

    1.最基本的弹出窗口代码 <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> ...

  7. python应用-输入三个数,输出其最大值

    """ 输入三个数,输出其最大值 Author:罗万财 Date:2017-7-6 """ a=int(input('a=')) b=int ...

  8. 【Spark】ScalaIDE运行spark,A master URL must be set in your configuration

    or SparkSession.master("local")

  9. es6字符串扩展 -- 字符串长度补全功能 padStart(), padEnd()

    ES2017 引入了字符串补全长度的功能.如果某个字符串不够指定长度,会在头部或尾部补全.padStart()用于头部补全,padEnd()用于尾部补全. 'x'.padStart(5, 'ab') ...

  10. [GXOI/GZOI2019]旅行者 (最短路)

    题意 给定一个有向图,其中一些顶点为关键点.求这些关键点两两之间最小距离. 题解 考试时没怎么想写了50分暴力走了.以为是什么强连通分量的解法,结果就是个最短路.直接从关键点跑一次最短路dis[0], ...