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 ...
随机推荐
- 关于SQL优化
建立索引常用的规则 表的主键.外键必须有索引: 数据量超过300的表应该有索引: 经常与其他表进行连接的表,在连接字段上应该建立索引: 经常出现在Where子句中的字段,特别是大表的字段,应该建立索引 ...
- 【Netty】初识Netty
一.为什么会出现Netty 之前我们使用通用的应用程序或库来相互通信.例如,我们经常使用HTTP客户机库从web服务器检索信息,并通过web服务调用远程过程调用.然而,通用协议或其实现有时伸缩性不是很 ...
- Linux service进程管理
Linux进程基本介绍: 1)在Linux中,每个执行的程序(代码)都称为一个进程.每一个进程都分配一个ID号. 2)每一个进程,都对应一个父进程,而这个父进程可以复制多个子进程.例如www服务器. ...
- zabbix--微信告警
zabbix 微信告警机制 zabbix 告警机制有很多,比如邮件.微信.电话.短信等等.很多,但是像电话和短信都是有钱人玩的,我们这些穷屌丝玩玩 微信 邮件 就可以了. 参考:https://git ...
- C++学习(5)—— 内存的分区模型
C++程序在执行时,将内存大方向划分为4个区域 代码区:存放函数体的二进制代码,由操作系统进行管理的 全局区:存放全局变量和静态变量以及常量 栈区:由编译器自动分配释放,存放函数的参数值.局部变量等 ...
- Invalid mime type "application nd.ms-excel; charset=utf-8;charset=utf-8": does not contain '/'
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is ...
- ovirt常用后台维护命令
以下命令是在node主机上操作 查看hosted-engine虚机的状态 hosted-engine --vm-status 启动hosted-engine虚机 hosted-engine --vm- ...
- pace.js[转载]
pace.js监控了什么: pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Moni ...
- Elasticsearch 索引文档如何使用自动生成 Id?
一个文档的 _index . _type 和 _id 唯一标识一个文档. 我们可以提供自定义的 _id 值,或者让 index API 自动生成. 如果你的数据没有自然的 ID, Elasticsea ...
- hive中删除表的错误Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException
hive使用drop table 表名删除表时报错,return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException 刚 ...