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. ajax加载验证码这样不断刷新的文件无法刷新问题

    看了很多网站,在前端不设置缓存,这样会把需要缓存的数据漏掉 觉得欺骗浏览器的方式很不错,方式如下 为了在所有浏览器上都能实现点击验证码的刷新功能,我们可以在上述代码中添加随机参数,对浏览器进行欺骗. ...

  2. AI人工智能-Python实现前后端人机聊天对话

    [前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...

  3. 使用ArcGIS for Server的Feature Access REST在线编辑图层

    如何启用Feature Access可以参考以前写的一篇博客:http://www.cnblogs.com/oceanking/p/3895257.html 本文主要关注一个全是点的图层,我也不知道学 ...

  4. 关于Python文件读写

    Python中文件操作可以通过open函数,这的确很像C语言中的fopen.通过open函数获取一个file object,然后调用read(),write()等方法对文件进行读写操作. 1.open ...

  5. 关键字explicit的作用(转)

    C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数默认情况 ...

  6. 顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动

    顶部选项卡-可左右拖动(webview)的示例中,如何做到tab与webview联动滚动,效果类似uc头条一样 ps:自己也不确定有多少了到航头,页面怎么办,到航头从后台获取,页面不可能建N多个.ht ...

  7. LeetCode 1110. Delete Nodes And Return Forest

    原题链接在这里:https://leetcode.com/problems/delete-nodes-and-return-forest/ 题目: Given the root of a binary ...

  8. MongoDB Map Reduce(转载)

    MongoDB Map Reduce Map-Reduce是一种计算模型,简单的说就是将大批量的工作(数据)分解(MAP)执行,然后再将结果合并成最终结果(REDUCE). MongoDB提供的Map ...

  9. HHHOJ #153. 「NOI模拟 #2」Kotomi

    抽代的成分远远大于OI的成分 首先把一个点定为原点,然后我们发现如果我们不旋转此时答案就是所有位置的\(\gcd\) 如果要选择怎么办,我们考虑把我们选定的网格边连同方向和大小看做单位向量\(\vec ...

  10. Android编程权威指南笔记2:解决R文件爆红问题和SDK概念

    在android studio中会遇到R文件的丢失,所以遇见这问题怎么解决呢? 重新检查资源文件中xml文件 最近一次编译时如果未生成R.java文件,项目中资源引用的地方都会出错.通常,这是某个xm ...