我使用的是angular 5.0.3,我想用一堆查询参数启动我的应用程序,比如/app?param1=hallo¶m2=123。如何在Angular 2中从url中获取查询参数?对我没用。
有什么想法如何获得查询参数工作?
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
这个私有函数帮助我获取参数,但我认为在新的Angular环境中这不是正确的方式。
(更新:)
我的主应用程序是这样的
@Component({...})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
小心你的路线。“redirectTo”将删除|删除任何查询参数。
const appRoutes: Routes [
{path: "one", component: PageOneComponent},
{path: "two", component: PageTwoComponent},
{path: "", redirectTo: "/one", pathMatch: full},
{path: "**", redirectTo: "/two"}
]
我用查询参数调用主组件,比如“/main?”param1=a¶m2=b,并假设我的查询参数在重定向转发生效之前到达主组件中的“ngOnInit()”方法。
但这是错误的。重定向将出现在前面,删除查询参数并在没有查询参数的情况下调用主组件中的ngOnInit()方法。
我把第三条路线改成了
{path: "", component: PageOneComponent},
现在我的查询参数可以在主要组件ngOnInit和PageOneComponent中访问。
当你有一个空路由对象时,这主要是因为你没有在app.component.html中使用路由器出口。
如果没有这个,你将无法获得一个有意义的非空子对象的路由对象,特别是params和queryParams。
尝试添加<router-outlet><router-outlet>
< app-main-component > < / app-main-component >
在此之前,确保你在App -routing >中准备好了查询参数,它导出了App组件使用的类Route:
param: '/param/:dynamicParam', path: MyMainComponent
当然,最后一件事,为了获得你的参数,我个人使用this.route.snapshot.params.dynamicParam,其中dynamicParam是在你的app-routing组件中使用的名称:)
小心你的路线。“redirectTo”将删除|删除任何查询参数。
const appRoutes: Routes [
{path: "one", component: PageOneComponent},
{path: "two", component: PageTwoComponent},
{path: "", redirectTo: "/one", pathMatch: full},
{path: "**", redirectTo: "/two"}
]
我用查询参数调用主组件,比如“/main?”param1=a¶m2=b,并假设我的查询参数在重定向转发生效之前到达主组件中的“ngOnInit()”方法。
但这是错误的。重定向将出现在前面,删除查询参数并在没有查询参数的情况下调用主组件中的ngOnInit()方法。
我把第三条路线改成了
{path: "", component: PageOneComponent},
现在我的查询参数可以在主要组件ngOnInit和PageOneComponent中访问。
查询和路径参数(Angular 8)
url,如https://myapp.com/user/666/read?age=23使用
import { combineLatest } from 'rxjs';
// ...
combineLatest( [this.route.paramMap, this.route.queryParamMap] )
.subscribe( ([pathParams, queryParams]) => {
let userId = pathParams.get('userId'); // =666
let age = queryParams.get('age'); // =23
// ...
})
更新
如果你使用this.router.navigate([someUrl]);你的查询参数被嵌入到someUrl字符串中,然后angular对URL进行编码,你会得到类似https://myapp.com/user/666/read%3Fage%323的东西——以上解决方案会给出错误的结果(queryParams将为空,路径参数可以粘在最后一个路径参数上,如果它在路径端)。在这种情况下,改变导航的方式
this.router.navigateByUrl(someUrl);