详解Angular之路由基础

目录
  • 一、路由相关对象
  • 二、路由对象的位置
  • 三、路由配置
  • 四、代码中通过Router对象导航
  • 五、配置不存在的路径
  • 六、重定向路由
  • 七、在路由时候传递数据

一、路由相关对象

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

(0)

相关推荐

  • AngularJS ui-router刷新子页面路由的方法

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:'app.toMenu'}"> <!-- 这个方法刷新当前路由页面 --> 另外也可以用$state.reload(); $state.reload()是

  • Angular8路由守卫原理和使用方法

    路由守卫 守卫,顾名思义,必须满足一定的条件得到许可方可通行,否则拒绝访问或者重定向.Angular中路由守卫可以借此处理一些权限问题,通常应用中存储了用户登录和用户权限信息,遇到路由导航时会进行验证是否可以跳转. 4种守卫类型 按照触发顺序依次为:canload(加载).canActivate(进入).canActivateChild(进入子路由)和canDeactivate(离开). 一个所有守卫都是通过的守卫类: import { Injectable } from '@angular/c

  • angular2路由之routerLinkActive指令【推荐】

    angular2的routerLinkActive指令在路由激活时添加样式class .red{ color: red; } <a routerLink="/user/login" routerLinkActive="red">login</a> 当url是user或者/user/login的时候,a标签将会被加上classred.当url变化为别的时,class将会被移除. 如何添加两个class    <a routerLink=&

  • 详解Angular路由动画及高阶动画函数

    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 在router.animate.ts中定义一个进场动画,一个离场动画. 因为进场动画和离场动画用的特别频繁,有一个别名叫:enter和:leave. import { trigger, state, transition, style, animate} from '@angular/animations'; export const slideToR

  • Angular路由ui-router配置详解

    简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router. 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件,将代码copy进去使用,这样就可以打入本地使用了,但是要注意的是,Angular的main.js一定要在ui-router之前引用,注意一下先后顺序问题. 例如: <s

  • Angular 多级路由实现登录页面跳转(小白教程)

    本文受众是 Angular 初学者,没有多级路由使用经验,不知道登录页面与主页跳转的实现逻辑,相反,看到这里你就可以结束了,不要浪费时间.下面来看看小白对于登录页面的理解: 上图中左边是导航菜单栏,右边的空白区域是 <router-outlet> 所在区域,即所有实现业务逻辑的组件都在这里显示 - 点击左边导航栏的项目右侧B区域就替换为对应的页面,那么问题来了,登录页面要怎么做? 多级路由实现图 图有点大,看不清楚的放大点看吧.看了这个图相信一部分人已经懂了实现原理了.如果还是不懂,来看下面的

  • 使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码

    使用 Angular RouteReuseStrategy 缓存组件 Cache components with Angular RouteReuseStrategy RouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行为. 当我们在组件间切换的时候,Angular都会销毁上一个组件,并且创建一个新的组件.在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似HTTP请求一样的昂贵的操作. 这时候就需要RouteR

  • 详解Angular路由之路由守卫

    一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由. 当用户未执行保存操作而试图离开当前导航时提醒用户. Angular提供了一些钩子帮助控制进入或离开路由.这些钩子就是路由守卫,可以通过这些钩子实现上面场景. CanActivate: 处理导航到某路由的情况. CanDeactivate: 处理从当前路由

  • 详解Angular之路由基础

    目录 一.路由相关对象 二.路由对象的位置 三.路由配置 四.代码中通过Router对象导航 五.配置不存在的路径 六.重定向路由 七.在路由时候传递数据 一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置在模块中.Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component. 2.RouterOutlet 在模版中

  • 详解angular笔记路由之angular-router

    本文介绍了angular笔记路由之angular-router,分享给大家,具体如下: 创建项目 ng new router --routing \\ 加routing参数 \\ 会新增一个app-routing.module.ts 文件 路由的基本使用 名称 简介 Routes 路由的配置,保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示 RouterOutler 在HTML中标记路由内容呈现的占位符指令 Router 运行时执行的路由对象,可以通过navigate(

  • 详解Angular路由之子路由

    目录 一.子路由语法 二.实例 1.新建2个组件修改其内容 2.修改路由配置 3.修改product.component.ts的模版 一.子路由语法 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 ng g component productDesc ng g component sellerInfo 重点是修改销售员信息组件,显示销售员ID. import { C

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 详解Angular组件之投影

    概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>

  • 详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • 详解linux正则表达式(基础正则表达式+扩展正则表达式)

    正则表达式应用非常广泛,例如:php,Python,java等,但在linux中最常用的正则表达式的命令就是grep(egrep),sed,awk等,换句话 说linux三剑客要想能工作的更高效,就一定离不开正则表达式的配合. 1.什么是正则表达式? 简单的说,正则表达式就是为处理大量的字符串而定义的一套规则和方法.通过定义的这些特殊符号的辅助,系统管理员就可以快速过滤.替换或者输出需要的字符串.linux正则表达式一般以行为单位处理的. 2.为什么要学正则表达式 在企业工作中,我们每天做的li

  • 鸿蒙开发之处理图片位图操作的方法详解(HarmonyOS鸿蒙开发基础知识)

    位图操作开发指导 图操作就是指对PixelMap图像进行相关的操作,比如创建.查询信息.读写像素数据等. 1.创建位图对象PixelMap // 指定初始化选项创建 PixelMap pixelMap2 = PixelMap.create(initializationOptions); // 从像素颜色数组创建 int[] defaultColors = new int[] {5, 5, 5, 5, 6, 6, 3, 3, 3, 0}; PixelMap.InitializationOption

  • 详解Java数据库连接JDBC基础知识(操作数据库:增删改查)

    一.JDBC简介 JDBC是连接java应用程序和数据库之间的桥梁. 什么是JDBC? Java语言访问数据库的一种规范,是一套API. JDBC (Java Database Connectivity) API,即Java数据库编程接口,是一组标准的Java语言中的接口和类,使用这些接口和类,Java客户端程序可以访问各种不同类型的数据库.比如建立数据库连接.执行SQL语句进行数据的存取操作. JDBC代表Java数据库连接. JDBC库中所包含的API任务通常与数据库使用: 连接到数据库 创

随机推荐