①路由的配置

1、首先用脚手架新建一个项目,在路由配置时选择yes

2、用ng g component创建组件

3、在src/app/app-routing.module.ts中配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { FirstComponent } from './components/first/first.component';
import { TwoComponent } from './components/two/two.component';
import { FirstChildrenComponent } from './components/first-children/first-children.component';
import { TwoChildrenComponent } from './components/two-children/two-children.component';
import { ThreeComponent } from './components/three/three.component'; const routes: Routes = [
// { path: '', component: FirstComponent }, //表示匹配到'/'路径,显示FirstComponent组件
{
path: 'first', component: FirstComponent,
children: [ //设置子路由
{ path: 'firstC/:hxId', component: FirstChildrenComponent } //设置动态路由
]
},
{
path: 'two', component: TwoComponent,
children: [
{ path: 'twoC', component: TwoChildrenComponent }
]
},
{
path: 'three', component: ThreeComponent
},
// { path: '**', component: FirstComponent }, //**表示匹配任意路径,显示FirstComponent组件
{ path: '', redirectTo: '/first', pathMatch: 'full' }, //表示匹配到'/'路径,重定向到'/first'路径
// { path: '**', redirectTo: '/two', pathMatch: 'full' } //**表示匹配任意路径,重定向到'/first'路径
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

②路由传参

1、使用动态路由传参

在first.component.html中,进行路由跳转,传参

<p>我用动态路由进行传参</p>
<ul>
<!-- 使用动态路由 -->
<li><a [routerLink]="[ '/first/firstC/',1]">我是商品1的详情</a></li>
</ul>
<router-outlet></router-outlet>
<button (click)="tiaoZhuan()">js跳转路由</button>

在first-children.component.ts子组件中引入ActivatedRoute模块,接收参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; @Component({
selector: 'app-first-children',
templateUrl: './first-children.component.html',
styleUrls: ['./first-children.component.less']
})
export class FirstChildrenComponent implements OnInit { constructor(public route: ActivatedRoute) { } ngOnInit(): void {
console.log(this.route);
this.route.params.subscribe({
next(res): any {
console.log(res);
}
});
} }

2、使用get传参

在two.component.html中,进行路由跳转,传参

<p>我用get进行传参</p>
<ul>
<!-- 使用get传参 -->
<li><a [routerLink]="['/two/twoC']" [queryParams]="{hxId:1}">我是商品1的详情</a></li>
</ul>
<router-outlet></router-outlet>

在two-children.component.ts子组件中引入ActivatedRoute模块,接收参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; @Component({
selector: 'app-two-children',
templateUrl: './two-children.component.html',
styleUrls: ['./two-children.component.less']
})
export class TwoChildrenComponent implements OnInit { constructor(public route: ActivatedRoute) { } ngOnInit(): void {
console.log(this.route);
this.route.queryParams.subscribe({
next(res): any {
console.log(res);
}
});
} }

③js路由跳转

在first.component.html中,进行路由跳转

<p>我用动态路由进行传参</p>

<!-- js跳转路由 -->
<button (click)="tiaoZhuan()">js跳转路由</button>

在first.component.ts中实现,引入Router模块

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; @Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.less']
})
export class FirstComponent implements OnInit { constructor(public router: Router) { } ngOnInit(): void {
}
tiaoZhuan(): any {
console.log(this.router);
this.router.navigate(['/three']); //实现路由跳转,也可以用动态路由或者get方式传参
} }

Angular:路由的配置、传参以及跳转的更多相关文章

  1. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  2. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  3. vue路由传参并跳转页面

    在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...

  4. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

  5. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

  6. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  7. vue-router路由如何实现传参

    tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...

  8. vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件

    后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页 ...

  9. ng4 路由多参数传参以及接收

    import { Router } from '@angular/router'; constructor( private router:Router, ) { } goApplicationDet ...

随机推荐

  1. 调整PG分多次调整和一次到位的迁移差别分析

    前言 这个问题来源于我们研发的一个问题,在进行pg调整的时候,是一次调整到位好,还是分多次调整比较好,分多次调整的时候会不会出现某个pg反复挪动的问题,造成整体迁移量大于一次调整的 最近自己的项目上也 ...

  2. cephfs删除报nospace的问题

    ceph Vol 45 Issue 2 CephFS: No space left on device After upgrading to 10.2.3 we frequently see mess ...

  3. 微信_跳一跳辅助程序_Python_(带GitHub项目地址)

    1.安装Python(推荐3.6) https://www.python.org/downloads/ 2.在github上下载脚本 [github项目地址](https://github.com/w ...

  4. SpringBoot 之 @ControllerAdvice 拦截异常并统一处理

    在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...

  5. redhat-DHCP服务的配置与应用

    DHCP服务器为客户端提供自动分配IP地址的服务,减轻网管的负担 首先 rpm -q dhcp 查看是否安装dhcp yum -y install dhcp进行安装 安装完成 dhcp服务配置 dhc ...

  6. 深度分析:面试90%被问到的 Session、Cookie、Token,看完这篇你就掌握了!

    Cookie 和 Session HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录:Session 和 Cookie 的主要目的 ...

  7. robot 如何定义用户关键字、变量

    1.用户关键字,使用robot语法定义的关键字 2.系统关键字  自带的 3.资源文件,自己定义的关键字 4.变量 自己定义的关键字,需单独建一个资源文件 自己写的关键字,需写在***Keywords ...

  8. Stream初步认识(一)

    Stream初步认识(一)测试 简介 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对 集合进行的操作,可以执行非常复杂的查找.过滤和映射数据等操作. 使用Stream AP ...

  9. 使用celery异步发送短信

    目录 1.使用celery异步发送短信 1.1在celery_task/mian.py中添加发送短信函数 1.2在verifcations/views.py中添加celery发送短信视图函数 1.3 ...

  10. JVM类加载机制详解,建议看这一篇就够了,深入浅出总结的十分详细!

    类加载机制 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 类加载的时机 遇到new(比如n ...