[Angular] 笔记 18:Angular Router

Angular Router 视频

chatgpt:
Angular 具有内置的大量工具、功能和库,功能强大且经过良好设计,如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中,无需额外的设置或第三方库。这简化了开发流程,因为不必从头编写或集成许多常见的功能,而是可以利用Angular提供的工具快速启动和构建应用程序。

也就是说,Angular 是一种自带电池(Batteries Included)的框架,web 开发所需要的一切应用尽有,Router 是其中之一。

当创建Angular app时,使用命令 ng new <app-name>, Angular 接着会问要不要 Routing 功能 ? 选择 yes, 生成的 app 就会带有 routing 模块:

在这里插入图片描述

1. 注册 routes

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';// 这里注册两个 route:homepage route 和 通配符 route
const routes: Routes = [{ path: '', component: HomeComponent, pathMatch: 'full' },{ path: '**', component: NotfoundComponent },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],
})
export class AppRoutingModule {}

2. 生成与所注册的 routes 对应的两个组件

在这里插入图片描述

一个组件名称为 notfound, 另一个为 home.

奇怪的是上述视频中的方法不起作用,没法生成组件,使用 ng-cli 命令:

PS D:\Angular\my-app> ng generate component home --module=app.module.ts    
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (585 bytes)
CREATE src/app/home/home.component.ts (267 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (727 bytes)
PS D:\Angular\my-app> ng generate component notfound --module=app.module.ts
CREATE src/app/notfound/notfound.component.html (23 bytes)
CREATE src/app/notfound/notfound.component.spec.ts (613 bytes)
CREATE src/app/notfound/notfound.component.ts (283 bytes)
CREATE src/app/notfound/notfound.component.css (0 bytes)
UPDATE src/app/app.module.ts (813 bytes)
PS D:\Angular\Angular Tutorial For Beginners 2022\my-app> 

在这里插入图片描述

3. 核对 index.html 内容

此文件中必须有:<base href="/"> 以及 <app-root></app-root>, 缺一不可,否则 routing 部分就不起作用。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>MyApp</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body>
</html>

4. 连结 router 链接

app.component.html

<router-outlet></router-outlet>
<div><a routerLink="/"></a>
</div>

缺少了 router-outlet, routing 也会不起作用

5. Navbar interface

app.component.ts:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';// navbar interface
interface Nav {link: string;name: string;exact: boolean;
}@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],
})
export class AppComponent {constructor() {}
}

6. 修改 app.component.html

将其中的 <a> 改成使用 for loop:

<router-outlet></router-outlet>
<div><a*ngFor="let item of nav"[routerLink]="item.link"routerLinkActive="active"[routerLinkActiveOptions]="{ exact: item.exact }">{{ item.name }}</a>
</div>

routerLinkActive 用于设置当前链接是否为 active,即所在页面是否与当前链接对应。

同时设置 app.component.css,设置 active 链接的背景色为红色:

.cool-bool {background: #0094ff;
}.active {background-color: red;
}

7. 运行 ng serve:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/584902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

显示器与按键(LCD 1602 + button)

一、实验目的&#xff1a; &#xff08;1&#xff09;学习lcd 1602的编程与使用、 &#xff08;2&#xff09;机械式复位开关button软件消抖的方法。 二、实验内容&#xff1a; 1、必做&#xff1a;先显示开机画面&#xff0c;&#xff1a;在1602显示器上&#xff0c;分两行…

Windows自动化之UIautomation(一)

一、UIAutomation的工作原理&#xff1a; UIAutomation操作程序时会给程序发送WM_GETOBJECT消息&#xff0c;如果程序处理WM_GETOBJECT消息&#xff0c;实现UI Automation Provider,并调用函数 UiaReturnRawElementProvider(HWND hwnd,WPARAM wparam,LPARAM lparam,IRawElemen…

白话机器学习的数学-2-分类

1、设置问题 图片分类&#xff1a;只根据尺寸把它分类为 纵向图像和横向图像。 如果只用一条线将图中白色的点和黑色的点分开&#xff1a; 这次分类的目的就是找到这条线。 2、内积 找到一条线&#xff0c;这是否意味着我们要像学习回归时那样&#xff0c;求出一次函数的斜率…

关于 K8s 的一些基础概念整理

〇、前言 Kubernetes&#xff0c;将中间八个字母用数字 8 替换掉简称 k8s&#xff0c;是一个开源的容器集群管理系统&#xff0c;由谷歌开发并维护。它为跨主机的容器化应用提供资源调度、服务发现、高可用管理和弹性伸缩等功能。 下面简单列一下 k8s 的几个特性&#xff1a; 自…

学习笔记-MyBatis的工作原理。

Mybatis的工作原理 读取MyBatis配置文件&#xff1a;mybatis-config.xml为MyBatis的全局配置文件&#xff0c;配置了MyBatis的运行环境等信息&#xff0c;例如数据库连接信息。加载映射文件。映射文件即SQL映射文件&#xff0c;该文件中配置了操作数据库的SQL语句&#xff0c;…

如何使用人工智能算法解决实际业务问题?

使用人工智能算法解决实际业务问题的过程可以概括为以下几个步骤&#xff1a; 问题定义和数据采集&#xff1a;首先&#xff0c;需要明确业务问题&#xff0c;并收集相关的数据&#xff0c;包括结构化和非结构化数据。这些数据可以来自不同的来源&#xff0c;如数据库、文本、图…

clickhouse连接工具dbeaver

地址 地址&#xff1a; Download | DBeaver Community 安装 表引擎 表引擎之TinyLog 以列文件的形式保存在磁盘上&#xff0c;不支持索引&#xff0c;没有并发控制。一般保存少量数据的小表&#xff0c; 生产环境上作用有限&#xff0c;多用于平时练习测试用。 内存引擎&am…

k8s 架构

主要组件 k8s有如下的主要组件&#xff1a; Control plane(s) and worker node(s)OperatorsServicesPods of containersNamespaces and quotasNetwork and policiesStorage. 一个k8s集群是有一个或多个 cp&#xff08;控制平面&#xff09;节点和一组worker 节点组成的。这个…

GaussDB数据库中的同义词SYNONYM

目录 一、前言 二、GasussDB数据库中的Synonym 1、Synonym的概念 2、语法介绍 3、Synonym的用途 三、Synonym在GaussDB数据库中是如何使用的 1、表的同义词使用&#xff08;示例&#xff09; 2、视图的同义词使用&#xff08;示例&#xff09; 3、函数的同义词使用&am…

Redis实现滚动周榜|滚动榜单|直播间榜单|排行榜|Redis实现日榜05

方法&#xff1a;写当日榜单当日滚动榜次日滚动榜定时任务处理历史数据 实际上&#xff0c;这个步骤并不复杂&#xff0c;主要是为了解决定时数据在时间间隔切换时无法平滑过渡的问题。具体来说&#xff0c;在编写代码时&#xff0c;我们需要执行以下三个操作。 获取7天、30天…

LeetCode1232. Check If It Is a Straight Line

文章目录 一、题目二、题解 一、题目 You are given an array coordinates, coordinates[i] [x, y], where [x, y] represents the coordinate of a point. Check if these points make a straight line in the XY plane. Example 1: Input: coordinates [[1,2],[2,3],[3,…

YOLO训练results.csv文件可视化(原模型与改进模型对比可视化)

一、单独一个文件可视化&#xff08;源码对应utils文件夹下的plots.py文件的plot_results类&#xff09; from pathlib import Path import matplotlib.pyplot as plt import pandas as pd def plot_results(fileruns/train/exp9/results.csv, dir):# Plot training results.c…

前后端分离nodejs+vue医院预约挂号系统6nrhh

医院预约挂号系统主要有管理员、用户和医生三个功能模块。以下将对这三个功能的作用进行详细的剖析。 运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均…

ubuntu下的磁盘管理

1. 磁盘文件目录 磁盘文件是linux下的/dev/sd*文件 2. 磁盘和目录容量查询 df&#xff1a;列出文件系统的使用量,主要查看文件系统的使用量 du&#xff1a;评估文件系统的磁盘使用量&#xff0c;主要是单个文件大小 3. 磁盘的挂载与卸载 mount&#xff1a;磁盘挂载 mount…

YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点

一、本文介绍 本文给大家带来的改进机制是iAFF&#xff08;迭代注意力特征融合&#xff09;&#xff0c;其主要思想是通过改善特征融合过程来提高检测精度。传统的特征融合方法如加法或串联简单&#xff0c;未考虑到特定对象的融合适用性。iAFF通过引入多尺度通道注意力模块(我…

JDK9及之后版本使用 jlink 生成定制化的 JRE

许多java软件的运行需要依赖jre&#xff0c;在 jdk8 之后&#xff0c;不再提供默认的 jre&#xff0c;后续如果项目中还是想用 jre 的形式发布软件&#xff0c;那么可以使用 jlink 工具生成 jre。 一、jlink 命令详解 jlink 二、查看jdk中包含的所有模块 如果在 jdk 安装文件夹…

Hadoop之Yarn 详细教程

1、yarn 的基本介绍和产生背景 YARN 是 Hadoop2 引入的通用的资源管理和任务调度的平台&#xff0c;可以在 YARN 上运行 MapReduce、Tez、Spark 等多种计算框架&#xff0c;只要计算框架实现了 YARN 所定义的 接口&#xff0c;都可以运行在这套通用的 Hadoop 资源管理和任务调…

【经典算法】有趣的算法之---蚁群算法梳理

every blog every motto: You can do more than you think. 0. 前言 蚁群算法记录 1. 简介 蚁群算法(Ant Clony Optimization, ACO)是一种群智能算法,它是由一群无智能或有轻微智能的个体(Agent)通过相互协作而表现出智能行为,从而为求解复杂问题提供了一个新的可能性…

PB 按Excel动态创建对应字段

/* > Function: w_cwjk_xhyy.wf_dw_init >-------------------------------------------------------------------- > 描述: 按excel表格列名,创建对应字段,用于部分接口对应字段导出文件 >-------------------------------------------------------------------- …

VSCode远程开发配置

目录 概要远程开发插件安装开始连接SSH无密码登录开发环境配置 概要 现在很多公司都是直接远程到服务器上写代码&#xff0c;使用远程开发&#xff0c;可以在与生产环境相同的环境中开发、测试和部署代码&#xff0c;减少因环境不同而导致的问题。当下VSCode远程开发是支持的比…