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 ...
随机推荐
- 2019年杭电多校第三场 1008题Game(HDU6610+带修改莫队+Nim博弈)
题目链接 传送门 题意 给你\(n\)堆石子,每堆有\(a_i\)堆石子,\(q\)次操作: 在\([L,R]\)内有多少个子区间使得\(Alice\)(先手)在\(Nim\)博弈中获胜: 交换\(a ...
- Appium如何查看webview上元素
现在大部分app都是混合式的native+webview,对应native上的元素通过uiautomatorviewer很容易定位到,webview上的元素就无法识别了: 那么如何定位webview上 ...
- Linux的sz和rz命令
工作中需要在Linux和Windows之间传输文件时,一般使用winscp或者ftp工具来完成,最近才知道有sz和rz这两个命令,方便好用. sz 下载 从Linux下载文件到本机 , 在Linux ...
- Java8的Stream API使用
前言 这次想介绍一下Java Stream的API使用,最近在做一个新的项目,然后终于可以从老项目的祖传代码坑里跳出来了.项目用公司自己的框架搭建完成后,我就想着把JDK版本也升级一下吧(之前的项目, ...
- flex布局--小实例
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左到右为: ...
- linux系统时区问题
1. centos 7 转载自:https://www.cnblogs.com/zhangeamon/p/5500744.html 查看时区: timedatectl $timedatectl sta ...
- continue语句:编程把100-300之间的能被25整除的数输出
#include<stdio.h>void main(){ int n; for(n=100;n<=300;n++) { if(n%25!=0) continue; printf(& ...
- MongoDB干货系列2-MongoDB执行计划分析详解(2)(转载)
写在之前的话 作为近年最为火热的文档型数据库,MongoDB受到了越来越多人的关注,但是由于国内的MongoDB相关技术分享屈指可数,不少朋友向我抱怨无从下手. <MongoDB干货系列> ...
- 大文件上传控件webupload插件
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 大文件断点续传webupload插件
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 <form id=&quo ...