angular入门基础教程(七)系统路由

路由的实现

当我们系统越来复杂,功能越来越多,路由也就是必须的了。在 ng 中如何实现路由呢?

启用路由

  • 在 app 目录下,新建一个 router 目录,把 app.routers.ts 文件拷贝过来,并修改一下。
import { Routes } from "@angular/router";
export const routes: Routes = [];
  • 在 app.config.ts 中,引入 router 模块
import { ApplicationConfig } from "@angular/core";
import { provideRouter } from "@angular/router";
import { routes } from "./app.routes";
export const appConfig: ApplicationConfig = {//注入路由providers: [provideRouter(routes)],
};
  • 在 main.ts 中,初始化 app 的配置
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

定义路由

  • 在 app.routes.ts 中,定义路由

    • path 前面不能有’/‘,否则会报错’,ng 渲染后 会自动给我们加上’/',不用我们手动加
    • a 的 routerLink 属性,必须和 path 对应,否则会报错
    • a的href属性不能用了,切换时页面会刷新闪烁,routerLink不会
    • 路由的 component,引入路径不对,会提示组件类型找不到的暴红
    • 路由的 title,在浏览器中,标题栏会显示这个,是自动给我们显示,不用我们手动赋值
import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";
export const routes: Routes = [{path: "/",component: HomeComponent,title: "首页",},{path: "/about",component: AboutComponent,title: "关于",},
];

请添加图片描述

错误排查

  • 这种是引入的路径不对,导致爆红
    在这里插入图片描述

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

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

相关文章

PostgreSQL 之 to_timestamp函数

to_timestamp 是 PostgreSQL 中的一个函数,用于将字符串或数字转换为时间戳。以下是关于 to_timestamp 的详细介绍: 引入版本 to_timestamp 函数在 PostgreSQL 7.3 版本中引入。 语法 to_timestamp 有两种主要的用法: 1.将字符串转换为时间…

C语言程序设计16

程序设计16 问题16_1代码16_1结果16_1 问题16_2代码16_2结果16_2 问题16_3代码16_3结果16_3 问题16_1 函数 f u n fun fun 的功能是:逆置数组元素中的值。 例如,若形参 a a a 所指数组中的数据最初排列为 : 1 , 2 , 3 , 4 , 5 , 6 …

flask 开始

# 导入flask类 from flask import Flask,request,render_template # 使用flask类来创建一个app对象 # __name__ 代表当前app.py 这个模块 app Flask(__name__) # 创建一个路由和视图函数的映射 url http://127.0.0.1:5000/ app.route("/") def hello_word():return …

高职院校大数据人才培养成果导向系统构建、实施要点与评量方法

一、引言 在当今信息化快速发展的背景下,大数据已成为推动社会进步和产业升级的重要力量。为满足社会对大数据人才的需求,高职院校纷纷开设大数据相关专业,并致力于探索科学有效的人才培养模式。本文立足于我国信息化与智能化发展趋势&#…

【初阶数据结构】10.排序(1)

文章目录 1.排序概念及运用1.1 概念1.2 运用1.3 常见排序算法 2. 实现常见排序算法2.1 插入排序2.1.1 直接插入排序2.1.2 希尔排序2.1.2.1 希尔排序的时间复杂度计算 2.2 选择排序2.2.1 直接选择排序2.2.2 堆排序 1.排序概念及运用 1.1 概念 排序:所谓排序&#x…

如何用PostMan按照规律进行循环访问接口

①设置动态变量 步骤一: 设置环境变量 1. 创建环境变量集合 在 Postman 左上角选择 "环境",然后点击 "添加" 来创建一个新的环境变量集合。给它起一个名称,比如 "uploadDemo". 2. 添加初始变量 在新创建的环境变量集…

基于python的百度迁徙迁入、迁出数据分析(三)

百度迁徙定义 百度迁徙释义: 百度迁徙以用户常住地所在地市或停留超过一天的非常住地定义为出发城市,以用户离开出发城市,并在非出发城市停留超过4 h以上定义为到达城市。采用4h阈值,排除了城际出行中的途经地。 定义参考来源…

filament 初使用记录

安装初始化 一、环境准备 官网要的 我安装的 二、下载安装 安装laravel composer create-project --prefer-dist laravel/laravel 项目名称 10.*导入 filament composer require filament/filament注册 filament 管理面板 php artisan filament:install --panels初始化…

freertos-HAL库-STM32Cubemax生成

打开cubemax选好型号配置RCC(外部高速时钟)这里查看原理图,我们把按键设为输入,led设为输出创建两个新任务(default是系统创建的)配置时钟,这里HSE是外部高速时钟,HSI是内部的&#…

axure10的安装与使用教程,问题整理

前言: axure10的安装与激活使用教程。 1、百度网盘下载相关资料 链接:https://pan.baidu.com/s/1OSD9J1wVuIptGxeRzwjlpA?pwddkbj 提取码:dkbj 2、开始安装,点击setup的安装包 除了更改地址外,其他的默认就行&…

构建实时Java数据处理系统:技术与实践

构建实时Java数据处理系统:技术与实践 大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入探讨如何构建一个实时Java数据处理系统。这涉及到数据流处理、实时计算以…

软件可靠性测试方法

可靠性测试方法, 也是一些通用的测试方法, 和具体业务无关, 包括: 异常值输入法。故障植入法。稳定性测试法。压力测试法。恢复测试法。 1.异常值输入法 异常值输入法是一种使用系统不允许用户输入的数值( 即异常值&a…

Matlab编程资源库(15)数值积分

一、基本原理 求解定积分的数值方法多种多样,如简单的梯形法、辛普生(Simpson)法、牛顿-柯特斯(Newton-Cotes)法等都是经常采用的方法。它们的基本思想都是将整个积分区间[a,b]分成n个子区间[xi,xi1] ,i1,2,…,n,其中 x 1a&#…

2024年PINN网络​还在火!发论文侧重点在哪儿?

2024年了,PINN网络依然火爆,各大顶会顶刊都能看见它的相关论文。 这是因为,AI交叉学科通常离不开求解偏微分方程PDE,而传统的求解方法受初始假设限制,一旦没设好就会导致很大的误差。 PINN作为一种新的思路&#xff…

气象水文耦合模WRF-Hydro建模技术

原文链接:气象水文耦合模WRF-Hydro建模技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247610398&idx4&sn34b4bbed4c74dcbbb0ac19ef8dcdaaff&chksmfa8271f9cdf5f8ef34ea6f721736a2fbbf8be896744ab7e46caa571c52a30628f056b4bd6964&t…

element-ui+vue2实现粘贴上传

element-uivue2实现粘贴上传 <style scoped lang"scss">.img-upload{position: relative;display: inline-block;margin-right: 9px;}.image {width: 100px;height: 100px;margin-right: 9px;}.image:last-child{margin-right: 0;}.img-upload .el-upload--pic…

Java学习|初识热加载

文章目录 引言Java热加载概念热加载与传统部署的区别热加载的好处风险与挑战 技术背景类加载机制类加载器层次结构 实现方法1. 使用Java Agent示例代码 2. 利用JRebel (XRebel)配置使用场景 3. Spring Boot DevTools配置使用场景 4. 动态类加载示例代码 5. JIT编译器的热替换示…

【嵌入式英语教程--7】C语言中的数据类型与内存管理

C语言中的数据类型与内存管理 英文原文 In the C programming language, data types define the kind of data that can be stored in variables. Common data types include integers, floating-point numbers, characters, and strings. The choice of data type has impli…

Python面试整理-第三方库

Python社区提供了大量的第三方库,这些库扩展了Python的功能,覆盖了从数据科学到网络应用开发等多个领域。以下是一些非常流行和广泛使用的第三方库: 1. NumPy ● 用途:数值计算。 ● 特点:提供了一个强大的N维数组对象和大量用于数学运算的函数。 ● 应用场景:科学计算、…

又一新AI搜索工具,OpenAI 推出新的搜索方式 SearchGPT

系列文章目录 每天推荐AI工具系列文章回顾&#xff1a; 选择 haiyi海艺图像生成、LoRA、模型的使用和训练网站 tusiart吐司艺术图像生成、LoRA 模型的使用和训练网站 解锁AI创造力的无限可能&#xff1a;探索Vivago.ai的革命性功能 文章目录 系列文章目录前言一、SearchGPT…