当前位置: 首页 > news >正文

Angular 中的路由

1 使用 routerLink 指令 路由跳转

  1. 命令创建项目:
ng new ng-demo
  1. 创建需要的组件:
ng g component components/home
ng g component components/news
ng g component components/produect
  1. 找到 app-routing.module.ts 配置路由:
    引入组件:
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';

配置路由:

const routes: Routes = [{path: 'home', component: HomeComponent},{path: 'news', component: NewsComponent},{path: 'product', component: ProductComponent},{path: '**', redirectTo: 'home'}
];
  1. 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由:
<h1><a routerLink="/home" routerLinkActive="active">首页</a><a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
<router-outlet></router-outlet>

routerLink 跳转页面默认路由:

//匹配不到路由的时候加载的组件 或者跳转的路由
{path: '**', redirectTo: 'home'}

routerLinkActive: 设置 routerLink 默认选中路由

<h1><a routerLink="/home" routerLinkActive="active">首页</a><a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>.active {color: green;
}
<h1><a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a><a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

2 使用方法跳转路由 - 使用 router.navigate 方法

在组件中注入 Router 服务,并使用 navigate 方法进行路由跳转:

import { Component } from '@angular/core';
import { Router} from "@angular/router";@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {title = 'routerProject';constructor(public router: Router) {}goToPage(path: string) {this.router.navigate([path]).then(r => {})}
}
<h1><button (click)="goToPage('home')">首页</button><button (click)="goToPage('news')">新闻</button>
</h1>
<router-outlet></router-outlet>

3 routerLink跳转页面传值 - GET传值的方式

  1. 页面跳转 - queryParams属性是固定的:
<h1><a routerLink="/home" routerLinkActive="active" [queryParams]="{name: 'index'}">首页</a><a routerLink="/news" routerLinkActive="active" [queryParams]="{name: 'news'}">新闻</a>
</h1>
<router-outlet></router-outlet>
  1. 获取参数方式:
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{constructor(public activatedRoute: ActivatedRoute) {}ngOnInit(): void {this.activatedRoute.queryParams.subscribe(data => {console.log(data)})}
}

4 使用方法跳转页面传值 - GET传值的方式

<h1><button (click)="goToPage('home', 'home')">首页</button><button (click)="goToPage('news', 'news')">新闻</button>
</h1>
<router-outlet></router-outlet>import { Component } from '@angular/core';
import { Router} from "@angular/router";@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {title = 'routerProject';constructor(public router: Router) {}goToPage(path: string, param: string) {this.router.navigate([path], {queryParams: {name: param}}).then(r => {})}
}

5 动态路由的方式-路由跳转

  1. 配置路由文件:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
import {ProductComponent} from "./components/product/product.component";const routes: Routes = [{path: 'home/:id', component: HomeComponent},
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {
}
  1. 页面设置参数:
<h1><a [routerLink]="['/home', '1000']" routerLinkActive="active">首页</a>
</h1>
<router-outlet></router-outlet>
  1. 参数接受:
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{constructor(public activatedRoute: ActivatedRoute) {}ngOnInit(): void {this.activatedRoute.params.subscribe(data => {console.log(data)})}
}

6 父子路由

  1. 创建组件引入组件
import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
  1. 配置路由
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";const routes: Routes = [{path: 'home',component: HomeComponent,children: [{path: 'news',component: NewsComponent},{path: '**', redirectTo: 'home'}]},{path: '**', redirectTo: 'home'}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {}
  1. 父组件中定义router-outlet
<router-outlet></router-outlet>

相关文章:

Angular 中的路由

1 使用 routerLink 指令 路由跳转 命令创建项目&#xff1a; ng new ng-demo创建需要的组件&#xff1a; ng g component components/home ng g component components/news ng g component components/produect找到 app-routing.module.ts 配置路由: 引入组件: import { Ho…...

【市场分析】Temu数据采集销售额商品量占比分析数据分析接口Api

引言 temu电商平台是一个充满活力的电商平台&#xff0c;拥有多种商品类别和数万家店铺。在这个项目中我的任务是采集平台上的大量公开数据信息。通过数据采集&#xff0c;我旨在深入了解temu电商平台的产品分布、销售趋势和文本描述&#xff0c;以揭示有趣的见解。 数据采集…...

Python笔记——linux/ubuntu下安装mamba,安装bob.learn库

Python笔记——linux/ubuntu下安装mamba&#xff0c;安装bob.learn库 一、安装/卸载anaconda二、安装mamba1. 命令行安装&#xff08;大坑&#xff0c;不推荐&#xff09;2. 命令行下载guihub上的安装包并安装&#xff08;推荐&#xff09;3. 网站下载安装包并安装&#xff08;…...

Redis之Java操作Redis的使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Redis实战开发》。&#x1f3af;&#x1f3af; …...

《网络协议》01. 基本概念

title: 《网络协议》01. 基本概念 date: 2022-08-30 09:50:52 updated: 2023-11-05 15:28:52 categories: 学习记录&#xff1a;网络协议 excerpt: 互联网、网络互连模型&#xff08;OSI&#xff0c;TCP/IP&#xff09;、计算机通信基础、MAC 地址、ARP & ICMP、IP & 子…...

设置Ubuntu网络代理

设置Ubuntu网络代理 1 编写set_proxy.sh 在/home/xxx新建文件set_proxy.sh&#xff0c;添加如下代码&#xff1a; #!/bin/sh hostip$(cat /etc/resolv.conf | grep nameserver | awk { print $2 }) wslip$(hostname -I | awk {print $1}) port10809PROXY_HTTP"http://$…...

LeetCode----23. 合并 K 个升序链表

 题目 给你一个链表数组,每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1: 输入:lists = [[1,4,5],[1,3,4],[2,6]] 输出:[1,1,2,3,4,4,5,6] 解释:链表数组如下: [ 1->4->5, 1->3->4, 2->6 ] 将它们合并到…...

[极客大挑战 2019]LoveSQL 1

题目环境&#xff1a;判断注入类型是否为数字型注入 admin 1 回显结果 否 是否为字符型注入 admin 1 回显结果 是 判断注入手法类型 使用堆叠注入 采用密码参数进行注入 爆数据库1; show database();#回显结果 这里猜测注入语句某字段被过滤&#xff0c;或者是’;被过滤导致不能…...

dji mini4pro 图片拷贝到电脑速度

环境 win电脑 amd3600 m.2固态硬盘 dp快充数据线 直接主机使用dp线连接无人机 9成是raw格式图片 一小部分是视频和全景图 TF卡信息: 闪迪 128GB 129元 闪迪 128GB TF(MicroSD) 存储卡U3 C10 V30 A2 4K 至尊超极速移动版 "TF卡至尊超极速" 理论读取200MB/s …...

基于深度学习的目标检测算法 计算机竞赛

文章目录 1 简介2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 1 简介 &#x1f5…...

前端面试题之CSS篇

1、css选择器及其优先级 标签选择器: 1类选择器、属性选择器、伪类选择器&#xff1a;10id选择器&#xff1a;100内联选择器&#xff08;style“”&#xff09;&#xff1a;1000!important&#xff1a;10000 2、display的属性值及其作用 属性值作用none元素不显示&#xff0c…...

【SQL相关实操记录】

一. 两张表的联合查询 task表中含 id(任务的序列号), action(任务内容), owner(任务分配的对象), target_date(目标完成日期), status(任务的完成状态),mmid(对应meeting的序列号--表示在该meeting中所对应布置的任务). meeting表中含id(meeting的序列号), status(meeting记…...

Python爬虫实战-批量爬取下载网易云音乐

大家好&#xff0c;我是python222小锋老师。前段时间卷了一套 Python3零基础7天入门实战https://blog.csdn.net/caoli201314/article/details/1328828131小时掌握Python操作Mysql数据库之pymysql模块技术https://blog.csdn.net/caoli201314/article/details/133199207一天掌握p…...

LeetCode 面试题 16.14. 最佳直线

文章目录 一、题目二、C# 题解 一、题目 给定一个二维平面及平面上的 N 个点列表 Points&#xff0c;其中第 i 个点的坐标为 Points[i][Xi,Yi]。请找出一条直线&#xff0c;其通过的点的数目最多。 设穿过最多点的直线所穿过的全部点编号从小到大排序的列表为 S&#xff0c;你仅…...

Spring Boot创建多模块项目

创建一个普通的Spring Boot项目, 然后只留下 pom.xml 剩下的都删掉 删除多余标签 标识当前为父模块 创建子模块 删除子模块中多余标签 声明父模块 在父模块中声明子模块...

Node.js、Chrome V8 引擎、非阻塞式I/O介绍

目录 Node.js介绍Chrome V8 引擎介绍非阻塞式I/O介绍 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01; Node.js介绍 Node.js 是一个…...

企业服务总线ESB有什么作用?和微服务有什么区别?会如何发展?

企业服务总线ESB是什么 下面这张图&#xff0c;稍微了解些IT集成的朋友应该不陌生。 随着信息化发展不断深入&#xff0c;企业在不同的阶段引入了不同的应用、系统和软件。这些原始的应用系统互不连通&#xff0c;如同一根根独立的烟囱。 但是企业业务是流程化的&#xff0c;…...

NLP之LSTM原理剖析

文章目录 背景simpleRNN的局限性 LSTM手写一下sigmoid例子支持长记忆的神经网络解读3重门 背景 SimpleRNN有一定局限性&#xff0c; 图片上的文字内容: 图片标题提到“SimpleRNN是一种基础模型。它用于解决序列型问题&#xff0c;其中的每一步的输出会影响到下一步的结果。图…...

ESP32网络开发实例-Web方式配置WiFi连接

Web方式配置WiFi连接 文章目录 Web方式配置WiFi连接1、ESP Wi-Fi 管理器介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将介绍如何实现在Web页面中配置ESP32的WiFi连接。 1、ESP Wi-Fi 管理器介绍 ESP32 将在启动时设置为热点模式 连接到充当 AP 的 ESP32 开发板。 在连…...

ElasticSearch 批量插入漏数据

项目场景&#xff1a; 项目中需要把Mysql数据同步到ElasticSearch中 问题描述 数据传输过程中数据不时出现丢失的情况&#xff0c;偶尔会丢失一部分数据&#xff0c;本地测试也无法复现&#xff0c;后台程序也没有报错&#xff0c;一到正式环境就有问题,很崩溃 这里是批量操…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

计算机系统结构复习-名词解释2

1.定向&#xff1a;在某条指令产生计算结果之前&#xff0c;其他指令并不真正立即需要该计算结果&#xff0c;如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方&#xff0c;那么就可以避免停顿。 2.多级存储层次&#xff1a;由若干个采用不同实现技术的存储…...