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 ...
随机推荐
- 浅谈Python设计模式 - 外观模式
声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 外观模式 外观模式的核心在于将复杂的内部实现包装起来,只向外界提供简单的调用接口 ...
- win黑窗口命令
rd 删除 文件夹, 语法: rd [/S] [/Q] [drive:]path 参数: drive 盘符 path 文件路径 /S 递归删除文件夹( 删除前, 要确认是否进行删除) /Q 关闭 ...
- 没有可用的软件包 build-essential,但是它被其他的软件包引用了【解决方法】
执行: sudo apt install build-essential 遇到如下问题: 解决方法: sudo apt-get update 此命令需要联网:待更新完毕后再次输入安装命令即可. 若在升 ...
- Httpd服务入门知识-Httpd服务常见配置案例之定义站点主页面及错误页面配置
Httpd服务入门知识-Httpd服务常见配置案例之定义站点主页面及错误页面配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.定义站点主页面 [root@node101.yi ...
- vue-cli配置移动端自适应flexible.js
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...
- Gym - 100962F: Frank Sinatra (树上莫队+bitset)
题意:给定一棵树,带边权.然后Q次询问,每次给出(u,v),求这个路径上最小的未出现的边权. 思路:树上莫队,求mex可以用分块或者bitset,前者可能会快一点. 莫队过程:求出欧拉序,即记录d ...
- wordpress定时发布失败Missed Schedule解决方法
今天一位客户的网站设置了文章定时发布但却没有发布成功,提示Missed Schedule错误,把所有的插件都暂停了再设置定时发布也不行,那就只能寻找其他的解决方案了.ytkah查看一下有没相关修复插件 ...
- win10怎么查看当前用户账号
https://jingyan.baidu.com/article/9225544679ab37851648f489.html
- websocket 浅学
websocket ,可以实现客户端与服务器的即时通讯,比如即时聊天,获取项目中的消息提醒等(小铃铛上的标红数字提醒) 话不多说,上马奔腾,走起 只写demo,不在项目中使用: 1.初始化项目, np ...
- 3495: PA2010 Riddle 2-sat 前缀优化
3495: PA2010 Riddle 2-sat 前缀优化 链接 bzoj 思路 不想说啥了,看hwim的吧,我去睡觉了zZ. 代码 /******************************* ...