angular的路由例子
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的路由例子的更多相关文章
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
- angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- angular 之路由
1.用angular-cli建一个工程自带路由怎么做? 命令:ng new 项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- angular的路由跳转,的监听$rootScope.$on
使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...
- angular的路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...
- angular中路由的实现(针对新手)
最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...
随机推荐
- mysql新加用户设置权限
1.开通操作权限和表权限 GRANT CREATE,ALTER,DROP,INSERT,UPDATE,DELETE,SELECT ON interface.* TO test1@'%' identif ...
- warning警告问题解决1
warning警告问题, 这时可以不去管它, 但如果想解决, 可以这样做: c:\python\lib\site-packages\locust\core.py:17: MonkeyPatchWarn ...
- sparkstreaming写入hbase表中总结
执行spark代码插入数据到hbase表中去的时候,遇到的错误 1. 缺少hadoop-mapreduce-client-core-2.5.1.jar包 错误:java.lang.ClassNotFo ...
- 内核中dump_stack的实现原理(1) —— 栈回溯
环境 Aarch64 Qemu aarch64-linux-gnu-gcc linux-4.14 概述 栈回溯的目的是将函数的调用栈打印出来,对于分析函数调用和debug系统异常会很有帮助 ...
- MyBatis mapper.xml中SQL处理小于号与大于号
这种问题在xml处理sql的程序中经常需要我们来进行特殊处理. 其实很简单,我们只需作如下替换即可避免上述的错误: < <= > >= & ' " < ...
- php怎样应对高并发
高并发下的数据安全 我们知道在多线程写入同一个文件的时候,会出现“线程安全”的问题(多个线程同时运行同一段代码,如果每次运行结果和单线程运行的结果是一样的,结果和预期相同,就是线程安全的). 如果是M ...
- 网页禁止右键,禁止F12,禁止选中,禁止复制,禁止缓存等操作
一.禁止右键 //方法一 document.onmousedown = function () { ) { return false; } } //方法二 document.oncontextmenu ...
- PID动图——很形象
p是控制现在,i是纠正曾经,d是管控未来! pid的公式: 其中Kp为比例带,TI为积分时间,TD为微分时间.PID控制的基本原理就是如此. pid的原理和代码,在木南创智的博客园中有很好的教程:ht ...
- python - django 项目部署 Ubuntu 服务器后接口访问一直 502 问题
问题描述:最近有了一台 Ubuntu 的服务器,然后准备部署个项目,结果没想到部署的过程跟用 Centos 的时候还有点不一样,最后一步我是卡在了 uwsgi 这里,访问一直502,且可以访问项目的静 ...
- learning shell check host dependent pkg
[Purpose] Shell script check host dependent pkg [Eevironment] Ubuntu 16.04 bash env ...