Angular学习笔记-配置静态路由

1.声明一个路由组件(app-routing.module.ts)

1.1 在新生成的项目声明

ng g <project name> --routing

1.2 内部项目声明

ng generate module app-routing --flat --module=app

2.app-routing.module.ts文件

在这里插入图片描述
同时他会在app.module里注入这个文件
在这里插入图片描述

3.Routers 路由配置

路由配置,保存着哪个URL对应展示哪个组件,以及在哪个RouterOutlet中展示组件
在这里插入图片描述

4.RouterOutlet 占位

在HTML中标记路由内容呈现位置的占位符指令。
app.component.html

<router-outlet></router-outlet>

5.Router/RouterLink 跳转方法

5.1 Router负责在运行时执行路由的对象,可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。
在这里插入图片描述
5.2 RouterLink在HTML中声明路由导航用的指令。
在这里插入图片描述
Router和RouterLink都是负责导航的,他们的区别在于Router是在controller里通过方法导航,RouterLink是在HTML上导航。

6.通配符路由

我们在页面上输入一个不存在的路由地址的时候,可以统一导航到通配符路由

{path:'**',component:Code404Component}

路由传参

路由传参的时候会有到ActivatedRoute方法,具体代码稍后整理出来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值