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

在angular 7中如何从routerLink传递对象

在Angular 7中,可以通过使用queryParams来从routerLink传递对象。

首先,在定义路由时,需要在路由配置中添加一个参数,用于接收传递的对象。例如:

代码语言:txt
复制
const routes: Routes = [
  { path: 'details', component: DetailsComponent }
];

然后,在使用routerLink导航时,可以通过queryParams来传递对象。queryParams是一个对象,可以包含多个键值对,每个键值对表示一个参数。例如:

代码语言:txt
复制
<a [routerLink]="['/details']" [queryParams]="{ id: 1, name: 'John' }">Go to Details</a>

在上面的例子中,传递了一个包含id和name属性的对象。

最后,在接收参数的组件中,可以使用ActivatedRoute服务来获取传递的对象。首先,需要在组件的构造函数中注入ActivatedRoute:

代码语言:txt
复制
constructor(private route: ActivatedRoute) { }

然后,在ngOnInit方法中,可以通过params属性来获取传递的参数。例如:

代码语言:txt
复制
ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const id = params['id'];
    const name = params['name'];
    // 使用传递的参数进行相应的操作
  });
}

通过上述步骤,就可以在Angular 7中使用routerLink传递对象了。

对于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或者腾讯云开发者社区获取更详细的信息。

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

相关·内容

Angular 入坑到挖坑 - Router 路由使用入门指北

一、Overview Angular 入坑记录的笔记第五篇,因为一直加班的缘故拖了有一个多月,主要是介绍 Angular如何配置路由,完成重定向以及参数传递。...Angular 入坑到弃坑 - Angular 使用入门 Angular 入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 Angular 入坑到挖坑 - HTTP...,Angular 会自动的帮我们将这个参数对象与 url 进行拼接。... Angular 中,需要在组件类中依赖注入 ActivatedRoute 来获取传递的参数信息 这里的 queryParamMap 是一个 Observable 对象,所以这里需要使用 subscribe...a 标签绑定的 routerLink 属性数组的第二个数据中,需要指定我们传递的参数值。

4.2K50

AngularDart 4.0 高级-路由概述 顶

Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。...并且路由器浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库中,该库自带软件包。... 大多数路由应用程序index.html 中都有一个元素来告诉路由器如何编写导航网址。 有关详细信息,请参阅设置基础href。...-- Routed views go here --> 路由链接 现在,您已经配置了路由并提供了一个渲染它们的地方,但您如何导航? 该URL可以直接浏览器地址栏中获得。...您可以将该列表绑定到RouterLink或将该列表作为参数传递给Router.navigate方法。

6.1K20

浅谈Angular

1.准备工作: ①全局安装 Angular CLI。...来控制元素的显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收外部传入的值,需要使用@Input装饰器\....--2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置--> 商品展示...Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是跨页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件中,当前操作的那个元素就是事件源。

4.4K10

AngularDart4.0 英雄之旅-教程-07路由 顶

RouterLink指令告诉路由在用户点击链接时的位置。 您使用链接参数列表定义了一个路由指令, 这个列表我们的小样本中只有一个元素,引用的路由名称。...英雄名单到选定的英雄。 “深层链接”网址粘贴到浏览器地址栏中。 路由到英雄细节 您可以AppComponent中添加到HeroDetailComponent的路由,其中定义了其他路由。...主要的变化是如何得到英雄的名字。...()中,你正在向路由器的navigate()方法传递一个两元素链接参数列表(一个名字和路由参数),就像你DashboardComponent中的[routerLink]绑定中一样。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

17.5K30

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务时,Angular...如何注入 Service,component添加私有构造函数 constructor(private heroService: HeroService) { } 1....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...Angular 的最佳实践之一就是一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...),a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务时,Angular...如何注入 Service,component添加私有构造函数 constructor(private heroService: HeroService) { } 1....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...Angular 的最佳实践之一就是一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...),a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',

3.7K50

教程| Angular 4 中加载功能模块(下)

应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。...原始 app.component.html 的一节 Sports 该语句下插入以下代码...幕后过程 继续操作之前,我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。 Windows 机器上,按下 Fn+F12。 Mac 上,按下 Command->alt->i。...参见 Angular4PreLoadModules.zip 中的示例应用程序,更详细地了解预加载。 自定义预加载:大型应用程序中,仅预先加载少数惰性加载模块的做法是比较合理的。...请参见 Angular 文档的 路由和导航 部分,了解如何自定义预加载配置。 结束语 加载时间是应用程序性能的关键因素,它会影响应用程序的用户体验。

2.3K10

Angular--Module的使用

@NgModule() 装饰器是一个函数,参数是一个元数据对象,元数据对象的属性用于描述这个模块。...其中最重要的属性如下: declarations(可声明对象表) ——属于本 NgModule 的组件、指令、管道。...(你也可以组件级别指定服务提供商,这通常是首选方式。) bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。...@NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

4.9K40

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

一、Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实现对于特性模块的惰性加载...对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-combat 二、Contents Angular 入坑到弃坑 - Angular 使用入门 Angular...入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 Angular 入坑到挖坑 - HTTP 请求概览 Angular 入坑到挖坑 - Router 路由使用入门指北...Angular 入坑到挖坑 - 路由守卫连连看 三、Knowledge Graph ?...,添加 router-outlet 标签用来声明路由页面上渲染的出口 Angular Router <a routerLink="/crisis-center" routerLinkActive

3.7K30

Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

一个url对应的一个页面,angular2中是一个组件。定义一个规则。...路由是@angular/router包中引入的。 路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。 一个路由配置 path中不能用斜线/开头。...用CanDeactivate来处理当前路由离开的情况。 用Resolve路由激活之前获取路由数据。 用CanLoad来处理异步导航到某特性模块的情况。...使用规则 分层路由的每个级别上,我们都可以设置多个守卫。 路由器会先按照最深的子路由由下往上检查的顺序来检查CanDeactivate守护条件。...['/hero', hero.id]); e.g.我们可以在对象中提供可选的路由参数,就像这样: <a [routerLink]="['/crisis-center', { foo: 'foo' }]"

3.3K10

Vue前端篇——Vue 3 中的路由传参详解

前言Vue应用中,路由传参是非常常见的需求,它允许我们不同的组件之间传递数据。Vue Router提供了两种主要的方式来传递参数:query参数和params参数。...传递参数主路由中定义跳转的子路由,使用组件可以方便地实现query参数的传递。有两种方式来指定to属性:字符串写法和对象写法。...接收参数目标组件中,也就是上述定义的'xiang'路由组件,我们可以使用useRoute来获取传递过来的query参数。...接收参数目标组件中,我们同样可以使用useRoute来获取传递过来的params参数。但这次我们需要访问的是route.params属性。...传递params参数之前,需要在路由规则中为对应的参数占位。例如,如果我们要传递一个名为id的参数,那么路由规则应该包含一个:id的动态段。Query参数和params参数各有优缺点。

58110

Angular与React相关

实现数据双向绑定 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case来控制元素的显隐 *ngIf--控制元素的显隐性(真正意义上的DOM...1.父向子 -- @Input装饰器声明输入属性,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 5. angularJS...4.routerLink: 结合a标签使用,也可以实现路由的切换 5.ActivateRoute: 对象,存储路由传值的数据 6.angularJS路由里如何传值?...分条说明. 1.查询参数传值 利用queryParams属性传值 2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置 7....如果存储state里的值发生变化,对应绑定了该值的试图会自动更新 9. React如何进行组件间通信, 详细分别说明? 1. 父向子--props对象 2. 子向父--回调函数 3.

1.2K20
领券