首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 7:从当前路由中提取某个路由名称

Angular是一种用于构建Web应用程序的开发框架,而Angular 7是Angular的一个版本。在Angular中,我们可以通过当前路由来提取某个特定路由的名称。下面是一个完善且全面的答案:

在Angular中,可以使用ActivatedRoute模块中的snapshot属性和paramMap属性来获取当前路由中的参数和参数值。要提取某个路由的名称,可以按照以下步骤进行操作:

  1. 导入ActivatedRoute模块:
代码语言:txt
复制
import { ActivatedRoute } from '@angular/router';
  1. 在组件的构造函数中注入ActivatedRoute:
代码语言:txt
复制
constructor(private route: ActivatedRoute) { }
  1. 使用snapshot属性来获取当前路由的参数和参数值。假设我们的路由路径为"/example/:name",其中:name表示路由参数名称:
代码语言:txt
复制
ngOnInit() {
  const name = this.route.snapshot.params.name;
  console.log(name); // 打印出路由参数的值
}

通过上述步骤,我们可以从当前路由中提取某个路由名称。这在很多场景中都很有用,比如根据不同的路由名称展示不同的内容或执行不同的操作。

关于Angular 7的更多信息,您可以参考腾讯云的相关产品文档和教程:

注意:本答案遵循要求,没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

达观数据对AngularJS技术的思考与实践

一、Angular MVC模型: MVC作为web应用程序的一种优秀的设计模式,由model,veiw,controller三部分组成,它隔离了应用逻辑用户界面层和支持的关注点分离,所以常受欢迎。...rootScope创建好会以服务的形式加入到 $injector。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。...Js路由配置: 模版template: ng-view 是一个用来包含当前路由(/home, /about, or /contact)的模板的angular指令, 它会获得基于特定路由的文件并将其诸如到主布局...Element表示提取整个元素。 Replace:true表示替换当前元素,false表示拼接。默认false。...1)作用域的原型继承:原型继承时对变量的赋值不会修改原型的值,而是直接在当前scope创建一个同名的属性;但如果是变量是对象,则不会创建。即基本类型会重新创建变量,引用则不会。 ?

5.4K150
  • AngularDart4.0 英雄之旅-教程-07路由

    当前AppComponent的英雄相关的重新定位到单独的HeroesComponent。 添加路由。 创建一个新的DashboardComponent。 将Dashboard绑定到导航结构。...路由是导航的另一个名称路由是导航视图到视图的机制。 分割AppComponent 当前的应用程序加载AppComponent并立即显示英雄列表。...英雄名单到选定的英雄。 “深层链接”网址粘贴到浏览器地址栏路由到英雄细节 您可以在AppComponent添加到HeroDetailComponent的路由,其中定义了其他路由。...class HeroDetailComponent implements OnInit { 在ngOnInit()生命周期的钩子RouteParams服务中提取id参数值,并使用HeroService...该列表包含两个元素:目标路由名称和设置为当前英雄id值的路由参数。

    17.6K30

    Angular 入坑到挖坑 - 路由守卫连连看

    对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-combat 二、Contents Angular 入坑到弃坑 - Angular 使用入门 Angular...入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 Angular 入坑到挖坑 - HTTP 请求概览 Angular 入坑到挖坑 - Router 路由使用入门指北...Angular 入坑到挖坑 - 路由守卫连连看 三、Knowledge Graph ?...在跳转到组件前获取某些必须的数据 离开页面时,提示用户是否保存未提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...:是否允许通过延迟加载的方式加载某个模块 在添加了路由守卫之后,通过路由守卫返回的值,从而达到我们控制路由的目的 true:导航将会继续 false:导航将会中断,用户停留在当前的页面或者是跳转到指定的页面

    3.8K30

    AngularDart 4.0 高级-路由概述 顶

    并且路由器在浏览器的历史记录记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库,该库自带软件包。...在任何使用路由器功能的Dart文件,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...-- Routed views go here --> 路由链接 现在,您已经配置了路由并提供了一个渲染它们的地方,但您如何导航? 该URL可以直接浏览器地址栏获得。...路由将每个链接参数列表解析为完整的URL。 RouterLink指令还有助于在视觉上区分当前所选活动路线的锚点。...改变危机的名称。 请注意危机列表的相应名称不会更改。 ? 与英雄细节不同,当您键入更新时,危机细节更改是暂时的,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。

    6.1K20

    Angular 路由配置(预加载配置,懒加载配置)

    @NgModule结构说明: @NgModule({   declarations: [], //属于当前模块的组件、指令及管道   imports: [], //当前模板所依赖的项,即外部模块(包括...httpModule、路由等)   export:[],//声明出应用给其他的module使用   providers: [], //注入服务到当前模块   bootstrap: []//默认启动哪个组件...forRoot()//在主模块定义主要的路由信息 forChild()``//应用在特性模块(子模块) (2)懒加载:loadChildren 此处并没有将对应的模块加入到AppModule,而是通过...loadChildren属性,告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。...loadChildren的属性值由三部分组成: 需要导入Module的相对路径 #分隔符 导出模块类的名称 (3)预加载 在使用懒加载的情况下,路由第一次加载某个模块时,有时反应有延迟。

    3.2K30

    Angular CLI 使用教程指南参考

    > [options] 创建一个新的 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建的文件和执行的操作,实际上并没有创建项目 --verbose -v...npm命令 --name 指定创建项目的名称 ng completion 命令 描述 ng completion 将自动完成功能添加到ng命令的shell ng doc 命令 描述 ng doc... 在浏览器打开Angular文档并搜索当前关键字 ng e2e 命令 描述 ng e2e 使用protractor在当前应用运行e2e测试 ng format 命令 描述 ng...--skip-router-generation 跳过生成父路由配置。只能用于路由命令。 --default 指定路由应为默认路由。 --lazy 指定路由是延迟的。 默认为true。...ng get 命令 描述 ng get [options] Angular CLI配置获取值 pathN是一个有效的JavaScript参数路径,例如

    3K50

    【转载】【ionic+angularjs】angularjs ui-router路由简介

    之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。...那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?...参数: stateOeName:string,部分名称,相对名称,或者通过当前状态进行全局模式查找。 params:object,一个参数对象。 options:可选配置对象。...$stateProvider 处理路由状态的服务,路由的状态反映了该项在应用程序的位置,描述了在当前状态下UI是应该怎么样的,并且该做什么。...在ngRouteresolve选项可以允许开发者在路由到达前载入数据保证(promises)。在使用这个选项时比使用angular-route有更大的自由度。

    7.4K70

    【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。...那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?...参数: stateOeName:string,部分名称,相对名称,或者通过当前状态进行全局模式查找。 params:object,一个参数对象。 options:可选配置对象。...$stateProvider 处理路由状态的服务,路由的状态反映了该项在应用程序的位置,描述了在当前状态下UI是应该怎么样的,并且该做什么。...在ngRouteresolve选项可以允许开发者在路由到达前载入数据保证(promises)。在使用这个选项时比使用angular-route有更大的自由度。

    7.3K40

    ASP.NET MVC是如何运行的: URL路由

    目标Controller和Action的名称包含在HTTP请求,而ASP.NET MVC的首要任务就是通过当前HTTP请求的解析得到正确的Controller和Action的名称。...一、RouteData ASP.NET定义了一个全局的路由表,路由的每个路由对象对应着一个将Controller和Action名称作为站位符的URL模板。...表示Controller和Action名称的同名属性直接Values字典中提取,对应的Key分别为controller和action。...属性Namespaces表示辅助Controller类型的解析而设置的命名空间列表,该属性值DataTokens字典中提取,对应的Key为namespaces。...virtual RouteData RouteData { get; set; } 5: } 二、Route和RouteTable RouteData具有一个类型为RouteBase的Route属性,表示当前路由当前请求匹配的路由对象

    1.8K60

    8分钟为你详解React、Angular、Vue三大框架

    当前世界,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题。...钩子只能在React函数组件调用,不能在普通函数或类组件调用。 定制Hooks 构建自己的Hooks,也就是所谓的自定义Hooks,可以让你把组件逻辑提取到可重用的函数。...常用命令 终端上,全局安装Angular CLI: npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区: ng new my-project-name...Vue用户可以使用模板语法,也可以选择使用JSX直接编写渲染函数,渲染函数允许软件组件构建应用程序。...7、官方工具 Devtools - 用于调试Vue.js应用程序的浏览器devtools扩展。

    22.1K20

    前端面试题angular_Vue前端面试题

    ,就是用 factory 创建 service 的内容 底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider,返回其 get 定义的内容。...提取共用的逻辑到 service (比如后台数据的请求,数据的共享和缓存,基于事件的模块间通信等),提取共用的界面操作到 directive (比如将日期选择、分页等封装成组件等),提取共用的格式化操作到...8、angular 应用常用哪些路由库,各自的区别是什么?...区别 ngRoute 模块是 Angular 自带的路由模块,而 ui.router 模块是基于 ngRoute模块开发的第三方模块。...使用 ui.router 能够定义有明确父子关系的路由,并通过 ui-view 指令将子路由模版插入到父路由模板的 中去,从而实现视图嵌套。

    14.1K20

    Angular 入坑到挖坑 - 模块简介

    、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,在开发通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块...常见的 NgModule 模块 模块名称 模块所在文件 功能点 BrowserModule @angular/platform-browser 用于启动和运行浏览器应用的的基本服务 CommonModule...@angular/forms 构建响应式表单 RouterModule @angular/router 使用前端路由 HttpClientModule @angular/common/http 发起...数组添加根组件用来作为组件树的根 3.3、特性模块 特性模块是用来将特定的功能或具有相关特性的代码其它代码中分离出来,聚焦于特定应用需求。...对于带有很多路由的大型应用,考虑使用惰性加载的模式。

    1.8K20

    Blazor 路由路由模板

    候选路由列表产生自实现 IComponent 接口的已探索程序集中的类列表,更重要的是,使用 Route 属性进行修饰。收集的所有路由都存储在一个字典并按最具体到最不具体的顺序进行排序。...路由器之战:Blazor 与Angular 很长一段时间,路由逻辑的实现都隐藏在 Web 服务器或服务器端框架(如 ASP.NET)的折叠。...路由器的实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端的。让我们花点时间对合并的 Angular 路由器和仍在使用的 Blazor 路由的功能进行简要比较。...在 Blazor 路由器参数会自动分配给使用 [Parameter] 属性注释的组件的属性。根据参数和属性的名称进行匹配。...但是,在 Blazor 路由器可以在不离开客户端的情况下进行导航,无需服务器完全重新加载内容。 缺少的功能 Blazor 框架是一个极具吸引力的软件,但很多功能仍然在开发

    8.4K21

    ASP.NET Core的路由:内联路由约束的检验

    某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束。...方法的参数分别是代表当前请求上下文的HttpContext、当前Router对象、约束在约束字典的Key(对于针对路由参数的约束,这个Key就是路由参数的名称)、请求URL解析出来的所有路由参数和路由方向...具体来说,RangeRouteConstraint根据被检验变量的名称(对应于routeKey参数)参数values(表示路由检验生成的所有路由变量)中提取被验证的参数值,然后判断它是否在通过属性Max...我们解析出来的路由参数获取目标资源条目的名称,然后利用资源文件自动生成的Resoruces类型获取对应的资源内容并响应给客户端。...,代表路由参数名称的字段_routeKey是在构造函数初始化的。

    1.3K60

    Angular学习(01)-架构概览

    有两个时机,一是组件被直接调用;二是触发了路由去加载; 路由通常的配置方式是用一个 @NgModel 声明的模块,但只用其中两项配置:imports 和 exports,imports 用来导入当前模块所有组件与...在以往,如果需要动态的更新 DOM 上的信息时,需要先获取到相对应的元素实例对象,然后调用相应的 DOM API 来操纵 DOM; 而使用 Angular 的话,可以直接在模板的相应元素,将某个属性与...TypeScript 文件某个变量直接进行绑定,后续这个变量值变化时,Angular 会自动去更新相应 DOM 的属性,也就是说,原本那些操纵 DOM 的代码,Angular 帮我们做了,我们不用再自己去处理了...但在 Angular ,不用这么麻烦,直接在组件的构造函数的参数,声明某个服务类型的参数即可。 指令 指令也是为组件服务的,但是,是在组件的模板文件来使用。...指令的原理也很简单,在模板某个元素标签上,添加上某个指令后,解析到这个指令时,会进入这个指令的相关工作,而指令内部,会获取到一个当前指令挂载的元素标签对象,既然都拿到这个对象了,那么,在指令内部想对这个元素做什么

    3.6K50

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular 2路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。...在Angular2,组件中发生的任何改变总是当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...将路由添加到顶层路由(app.routing.ts)并设置loadChildren。loadChildren会根文件夹获取绝对路径。...然后,导出const路由:ModuleWithProviders = RouterModule.forChild(routes); 7.  在Angular 2应用,我们应该注意哪些安全威胁?

    17.3K80
    领券