文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解Angular之路由基础

2024-04-02 19:55

关注

一、路由相关对象

Router和RouterLink作用一样,都是导航。Router是在Controller中用的,RouterLink是在模版中用到。

二、路由对象的位置

1、Routes对象

配置在模块中。Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component。

2、RouterOutlet

在模版中

3、RouterLink

指令,在模版中生成链接改变URL

4、Router

在Controller中,调用Router对象的navigate方法,路由切换。

5、ActivatedRoute

路由时候通过URL传递数据,数据会保存在ActivatedRoute对象中。

三、路由配置

使用ng new --routing参数时候会多生成出来一个app-routing.module.ts文件


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

会自动imports到app.module.ts中。

生成两个组件home组件和component组件。


const routes: Routes = [
  {path: '', component : HomeComponent}, //路径为空
  {path: 'product', component: ProductComponent}
];

注意:

1、path路径配置不能以斜杠开头,不能配置成path:'/product'。

因为Angular路由器会解析和生成url,不用/开头是为了在多个视图之间导航时能自由的使用相对路径和绝对路径。

2、在模版中写路径时,必须用/开头。

因为用斜杠加.表示要导航到根路由(/)还是子路由(./)。

/就是导航到根路由,从配置根路由那一层找。


<a [routerLink]="['/']">主页</a>

3、在<router-outlet>下面显示组件内容

4、routerLink参数是一个数组而不是字符串

因为在路由时候可以传递参数。

四、代码中通过Router对象导航

模版上加一个按钮


<input type="button" value="商品详情" (click)="toProductDetails()">

controller中使用router.navigate导航。

navigate参数和routerLink参数配置一样。


import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router:Router){
  }
  toProductDetails(){
    this.router.navigate(['/product']);
  }
}

点按钮和点链接效果一样。

五、配置不存在的路径

生成code404组件显示页面不存在。

路由匹配先匹配者优先,所以**通配符路由要放最后。


const routes: Routes = [
  { path: '', component: HomeComponent }, //路径为空
  { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
];

六、重定向路由

一个地址重定向到另一个指定组件

www.aaa.com => www.aaa.com/products

www.aaa.com/x => www.aaa.com/y 用户可能已经收藏了x地址。

用重定向路由


const routes: Routes = [
  { path: '', redirectTo : 'home', pathMatch:'full' }, //路径为空
  { path: 'home', component: HomeComponent },
  { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
];

七、在路由时候传递数据

有3种方式

1、在查询参数中传递数据

2、在路由路径中传递数据

定义路由路径时就要指定参数名字,在实际路径中携带参数。

3、在路由配置中传递数据

以上就是详解Angular之路由基础的详细内容,更多关于Angular之路由基础的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯