详解Angular之路由基础

 更新时间:2021年05月24日 09:57:56   作者:starof  
单页应用中,组件时构建应用的基础元素,页面展示什么内容均是靠页面有什么组件决定的,而展示什么组件又是由一组路由(带有Url元素的特定集合,可用于导航视图)决定的,希望本文可以帮助读者了解路由的基础概念和基础使用、写法。

一、路由相关对象

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之路由基础的资料请关注脚本之家其它相关文章!

相关文章

  • 整理AngularJS中的一些常用指令

    整理AngularJS中的一些常用指令

    这篇文章主要介绍了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat这四个指令的讲解,需要的朋友可以参考下
    2015-06-06
  • 再谈Angular4 脏值检测(性能优化)

    再谈Angular4 脏值检测(性能优化)

    这篇文章主要介绍了再谈Angular4 脏值检测(性能优化),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • AngularJS 简单应用实例

    AngularJS 简单应用实例

    本文主要介绍AngularJS 的简单应用实例,这里对AngularJS的知识总结,并提供实例代码和应用程序讲解,有需要的小伙伴可以参考下
    2016-07-07
  • 深入理解Angularjs中的$resource服务

    深入理解Angularjs中的$resource服务

    大家可以知道在Angularjs中可以用$http同服务器进行通信,功能上比较简单,AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。这篇文章主要给大家深入的介绍了Angularjs中的$resource服务。
    2016-12-12
  • Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)

    Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)

    TinyMCE是一个轻量级的富文本编辑器,相对于CK编辑器更加精简,但必须满足绝大部分场景的需要。这篇文章主要介绍了Angular5整合富文本编辑器TinyMCE(汉化+上传)的相关知识,需要的朋友可以参考下
    2020-05-05
  • Angular2使用Guard和Resolve进行验证和权限控制

    Angular2使用Guard和Resolve进行验证和权限控制

    本篇文章主要介绍了Angular2使用Guard和Resolve进行验证和权限控制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    这篇文章主要给大家介绍了关于Angular4学习教程之DOM属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • angular实现IM聊天图片发送实例

    angular实现IM聊天图片发送实例

    本篇文章主要介绍了angular实现IM聊天图片发送实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例

    这篇文章主要介绍了详解Angular-cli生成组件修改css成less或sass的实例的相关资料,这里主要讲解修改angular-cli.json文件,生成css或者less,需要的朋友可以参考下
    2017-07-07
  • angularJs-$http实现百度搜索时的动态下拉框示例

    angularJs-$http实现百度搜索时的动态下拉框示例

    下面小编就为大家分享一篇angularJs-$http实现百度搜索时的动态下拉框示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论