首页 > 其他分享 >Angular如何创建路由以及如何配置路由导航

Angular如何创建路由以及如何配置路由导航

时间:2023-08-14 13:34:20浏览次数:36  
标签:创建 angular 如何 导入 组件 Angular 路由

废话不多说直接进入正题,首先要创建好项目。

第一步:安装Angular路由

输入以下指令

npm install @angular/router

第二部:通过指令创建Angular路由守卫

ng g guard guards/auth(自定义名字) 

第二部:在module文件里面导入①路由导航组件②其他类组件,之后再

NgModule({
  declarations: [
    AppComponent,
     //在这里导入其他类组件
  ],

然后配置路由,在imports中导入 RouterModule.forRoot(路由变量名)

const routes: Routes = [
  { path: 'home', component: HomeComponent,canActivate:[loginGuradsGuard]  },
  // 添加更多路由...
 
];

后面关于路由条件的设定要在CanActivate中设置

import { CanActivateFn } from '@angular/router';

export const loginGuradsGuard: CanActivateFn = (route, state) => {
  console.log("启动");
  return false;
};

以上

标签:创建,angular,如何,导入,组件,Angular,路由
From: https://www.cnblogs.com/ZhuAo/p/17628384.html

相关文章

  • 如何编写定时关机脚本以保护服务器安全
    引言:近期,网络安全备受关注,服务器的安全性成为企业和个人用户日益关注的焦点。为了进一步加强服务器的安全性,定时关机是一种有效的措施。本文将介绍如何编写一个定时关机脚本,并结合定时任务编辑器实现自动关机操作,从而确保服务器在非工作时间段处于关闭状态,减少被攻击的风险。1.......
  • Golang: 如何交叉编译
    0.golang可以交叉编译出不同操作系统运行的程序1.在macm2架构下,golang程序mian文件所在的主目录下,即可生成#在命令行进入项目根目录,并执行以下命令CGO_ENABLED=0GOOS=xxxGOARCH=xxxgobuild参数说明:CGO_ENABLED:是否使用 C语言 版本的 GO 编译器。0 表示不......
  • 这是一份详细&清晰的 上传Android Library到JCenter 教程:如何使得自己的代码被别人优
    前言在日常Android开发中,我们经常会通过远程引用别人的代码(AndroidLibrary)来实现一些功能,如引用网络请求库Okhttp//通过在AndroidStudio的build.gradle文件中添加依赖dependencies{compile'com.squareup.okhttp:okhttp:2.4.0'}那么,该如何使得自己的代码(AndroidLibrary......
  • 如何实现自动化工业设备的一站式远程运维?
    设备运维在工业生产中起着至关重要的作用,运维的效率和质量都会直接影响到工业生产的流程,进而影响到企业的利润和服务。设备缺乏对外数据传输手段,形成数据孤岛,影响到信息集成与系统集成,设备无法实施监控、故障无法快速排查并预防,是自动化工业设备常见的问题。 传统的维护方式需要派......
  • 如何修改NuGet默认全局包文件夹的位置?
    由于一些历史原因,重装系统成为Windows用户解决疑难杂症的祖传手艺。受此影响,给硬盘分区几乎成为了一种执念,少则C、D两个盘,夸张一点的5~6个盘的也不是没有。PS:macOS和Linux一直都不鼓励给磁盘分区,虽然不禁止但也不提倡。随着云技术和宽带的提升,越来越多的人更喜欢把自己认为比较......
  • .net 框架引用asp.net core某些包提示已弃用,此包是旧版本且不再受到维护,因此已被弃用
     我们看到一些特定功能的包只更新到了2.2.2版本比如最常用的Microsoft.AspNetCore.Http这个类库,提示已弃用,我以为是换其他包了最后我们在微软官网文档里找到了答案:随着.NETCore3.0发布,许多ASP.NETCore程序集不再作为包发布到NuGet。而是改为将这些程序集包含在通过......
  • 带转义字符的字符串变量 如何不被转义
    问题:val="\061"python中如何使val的输出为r"\061"而不自动转义为"1"val="\061"repr(val)输出的结果是"'1'"这不是我想要的我想要的输出结果是r"\061"解决:val="\061"encoded_val=val.encode().decode('unico......
  • 数据结构与算法 --- 如何分析排序算法
    引言排序算法是最基础的算法,对于排序算法,除学习算法原理,代码实现之外,更重要的是学习每个算法的特点,知道在什么场景下选择那种算法。那一定是选择时间复杂度最低的排序算法就是最优的吗?可以从以下几个方面分析一下。排序算法的执行效率对于排序算法的执行效率,一般从以下几个方......
  • C语言中如何获取数组的中位数
    C语言中如何获取数组的中位数在C语言编程中,获取数组的中位数是一项常见而重要的任务。中位数是一个数组中的一个特殊值,它将该数组分为两个等长的部分。当数组长度为奇数时,中位数就是位于数组中间位置的元素;当数组长度为偶数时,中位数是中间两个元素的平均值。7C语言中如何获取数......
  • 如何在centos 7上安装pip命令?
    在centos7上,默认是python2.7的版本,并且没有pip命令。 如果要通过pip命令安装一些包、模块,就没有办法做到的。 所以,需要先进行pip命令的安装。 通过使用下面的命令,在centos7上安装pip命令:yuminstall-ypython-pip   安装之后,输入下面的命令,查看pip命令的......