angular 之路由
1、用angular-cli建一个工程自带路由怎么做?
命令:ng new 项目名 --routing
2、怎么使用路由器和路由器的一些基本使用。
//html页面 <a routerLink="/page1r" routerLinkActive="active">page1</a>
<a routerLink="/page2" routerLinkActive="active">page2</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a> //'outlets'指定路由内容放置到那个router-outlet 容器内位置 <router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
//ts页面
import { Routes, RouterModule } from '@angular/router';
const routes : Routes = [ {path: '',redirectTo:"/page1",pathMatch:"full"},//重定向
{path: 'page1',component:Page1Component},//路径定向
{path: 'page2',component:Page2Component},
{ path: 'compose', component: ComposeMessageComponent, outlet: 'popup' }, //路由到router-outlet属性名name 值为“popup”的路由容器上
{path: '**',component:Page404Component},//注意 路由是从上到下找的,所以不要把万能匹配放到前面去,不然在其后面的路由将会失效,
//所以404路由永远是放在最后面的
];
@NgModule(
{ imports: [ RouterModule.forRoot( appRoutes )//如果时分支路由这时要改成forChild(分支路由名) ],
exports: [ RouterModule ] }
)
3、路由传参
如果你想路由传参可用2种方式 :
路由参数(paramMap
)和查询参数(queryParamMap
)中的参数访问;
如: 路由是这样写的
//路由位置 http://localhost:4200/page1/fan/page3/lia?fang=1&liang=2#qwer <a [routerLink]="['/page1','fan','page3','lia']" routerLinkActive="active" [queryParams]="{'fang':1,'liang':2}" fragment="qwer">page1</a>
{path: 'page1/:id/page3/:id1',component:Page1Component} // ..ts
import {ActivatedRoute} from '@angular/router';//路由参数获取用‘ActivatedRoute’
constructor(
private _activatedRoute:ActivatedRoute
) {
ngOnInit() {
this._activatedRoute.queryParamMap
.subscribe(rap=>{ //这时是获得查询参数{'fang':1,'liang':2}
console.log(rap)
});
this._activatedRoute.paramMap
.subscribe(rap=>{//这里是获得路由参数{'id':1,'id1':2}
console.log(rap)
})
}
总结:
看了很多路angular路由文,反过来再看angular官网路由,发现其实官网写的最好,只是太多了,一时收获不了,当看多了细碎的路由文后再头看官网其实多读几篇就基本都知道用了
官方:https://www.angular.cn/guide/router
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 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- 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 ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- Angular动画——路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
随机推荐
- 树形DP+背包(poj1155泛化分组背包)
TELE Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3675 Accepted: 1936 Description ...
- c# BitArray 复制数组 copyto
C# 点阵列(BitArray) BitArray 类管理一个紧凑型的位值数组,它使用布尔值来表示,其中 true 表示位是开启的(1),false 表示位是关闭的(0). C# 拷贝数组的几种方法
- java 获取当前进程id 线程id
java 获取当前进程id 线程id RuntimeMXBean (Java Platform SE 8 ) https://docs.oracle.com/javase/8/docs/api/j ...
- Error:(12, 64) java: 未报告的异常错误java.io.IOException; 必须对其进行捕获或声明以便抛出
Error:(12, 64) java: 未报告的异常错误java.io.IOException; 必须对其进行捕获或声明以便抛出 package com.test; import org.apach ...
- scrapy爬虫系列之五--CrawlSpider的使用
功能点:CrawlSpider的基本使用 爬取网站:保监会 主要代码: cf.py # -*- coding: utf-8 -*- import scrapy from scrapy.linkextr ...
- Python性能分析指南(未完成)
英文原文:http://www.huyng.com/posts/python-performance-analysis/ 译文:http://www.oschina.net/translate/pyt ...
- 流畅的python 读书笔记 第二章 序列构成的数组 列表推导
列表推导是构建列表(list)的快捷方式,而生成器表达式则可以用来创建其他任何类型的序列.如果你的代码里并不经常使用它们,那么很可能你错过了许多写出可读性更好且更高效的代码的机会. 2.2.1 列表推 ...
- Java线程池ThreadPoolExecuter:execute()原理
一.线程池执行任务的流程 如果线程池工作线程数<corePoolSize,创建新线程执行task,并不断轮训t等待队列处理task. 如果线程池工作线程数>=corePoolSize并且等 ...
- EasyUI Pagination 分页
通过 $.fn.pagination.defaults 重写默认的 defaults. 分页(pagination)允许用户通过翻页导航数据.它支持页面导航和页面长度选择的可配置选项.用户可以在分页的 ...
- Spring整合Mybatis解决 Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
在Spring4和Mybatis3整合的时候,dao层注入'sqlSessionFactory'或'sqlSessionTemplate'会报错解决办法如下: package com.alibaba. ...