angular路由传参,这两种方式不得不看!
2022/6/18 4:20:07
本文主要是介绍angular路由传参,这两种方式不得不看!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前面给大家介绍了angular路由跳转,这次说一说angular路由传参,两种具体如下:
1,查询方式传参
<a href="" routerLink="/about" [queryParams]='{"nihao":"d dod f"}'>关于我们</a>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
constructor(private route:ActivatedRoute) { }
ngOnInit(): void {
debugger
this.route.queryParamMap.subscribe(function(query){
debugger
console.log(query)
console.log(query.get("nihao"))
})
}
}
2,动态方式传参
import { NgModule } from '@angular/core';
import { RouterModule, Routes, UrlSegment } from '@angular/router';
import { AboutComponent } from './page/about/about.component';
import { HomeComponent } from './page/home/home.component';
const routes: Routes = [
{ path: 'home/:name/:age', component: HomeComponent },
{ path: 'about', component: AboutComponent },
//pathMatch表示完全匹配,其中
{ path: '', redirectTo:"/about",pathMatch:"full" },
];
@NgModule({
//RouterModule.forRoot()启动路由
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
<a href="" [routerLink]="['/home','zhangdan']">首页</a> &ngsp;
以上便是关于angular路由传参的两种方法,更多内容干货可关注慕课网~
这篇关于angular路由传参,这两种方式不得不看!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)