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. k8s的常用命令(一)

    常用的kubectl命令   kubectl run kubia --image=luksa/kubia --port=8080 --generator=run/v1   --image 指定镜像 - ...

  2. cad 画图面板的尺寸大小定义

    输入limits 输入左下角点为 0,0 输入右上角点为大家需要的数  这里为100,50 输入zoom 输入a 就可以实现自定义编辑 注意事项 如果在你已经操作过的图纸上可能会失效 重新建一张图纸就 ...

  3. mysql 外键的基本使用

    外键的使用条件: 两个表必须是InnoDB表,MyISAM表暂时不支持外键外键列必须建立了索引,MySQL 4.1.2以后的版本在建立外键时会自动创建索引,但如果在较早的版本则需要显式建立:外键关系的 ...

  4. ls - 列出目录清单信息

    ls - list directory contents 列出目录内容 格式: ls [OPTION]... [FILE]... 常用选项: -a:显示所有文件或目录(包括隐藏目录和.(当前目录),. ...

  5. cron使用

    每天1点执行脚本 0 1 * * * /home/xtrabackup.sh service crond restart / systemctl restart crond 每隔5分钟 */5 * * ...

  6. 项目Beta冲刺--6/7

    项目Beta冲刺--6/7 作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Beta冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及 ...

  7. 开启了wpjam以后网站语言不能设置英文的解决方法

    一位网友问ytkah开启了wpjam以后网站语言不能设置英文了这是什么情况?选择English保存以后还是简体中文,禁用插件再设置语言是可以设为English,好几个站点都是这样 其实很简单,只要把这 ...

  8. Mac下用命令行获取苹果手机的UDID

    在终端输入命令行:system_profiler SPUSBDataType | grep "Serial Number:.*" | sed s#".*Serial Nu ...

  9. spark延迟调度与动态资源管理

    Spark中的延迟调度 Spark的Task的调度过程有五个本地性级别:PROCESS_NODE.NODE_LOCAL.NO_PREF.RACK_LOCAL.ANY.在理想的状态下,我们肯定是想所有的 ...

  10. JSP中EL表达式的比较符号、字符串比较

    在EL表达式中我们可以使用运算符以达到我们想要的结果,运算符按作用分为以下几种: 1.算术运算符 +  例如:${6+6} .注意:在EL表达式中的‘+’只有数学运算的功能,没有连接符的功能,它会试着 ...