在 Ionic 4 中使用查询参数

Question

我正在将一个 Ionic 3 项目转移到 Ionic 4。这是一个网络项目。

扫描二维码，页面打开。网址看起来像：

domain.com/qanda/pwa/home?user=simon&skill=ionic&role=Admin&Table=132

直到 Ionic 3，一切都很好。如果我在 Ionic 4 中添加这些参数并运行，它会打开domain.com/qanda/pwa/ - 一个空白页面，默认情况下甚至不会打开主页。

我在.htaccess旁边保留了文件，index.html以便我可以直接从 url 打开任何项目页面。下面是代码.htaccess：

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule (.*) https://%{HTTP_HOST}/qanda/pwa/index.html

如何在 Ionic 4 中实现查询参数？

Answer 1

如果您已经有像您发布的网址

domain.com/qanda/pwa/home?user=simon&skill=ionic&role=Admin&Table=132

只需使用 ActivatedRoute 获取参数值：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute)

ngOnInit() {
  this.route.queryParams.subscribe(params => {
  if (params) {
    let queryParams = JSON.parse(params);
    console.log(queryParams)
  }
});
}

Answer 2

因此，您在这里要做的是遵循angular 上的路线指南（https://angular.io/tutorial/toh-pt5）并创建一条路径：

export const routes: Routes = [
    { path: 'home/:id/:id2/:id3', component: YourComponent},
]

现在你添加上一个答案的 activeRoute ：

this.route.params.subscribe((params: any) => {
  if (params['id']) { //id }
  if (params['id2']) { //id2 }
  if (params['id3']) { //id3 }
});

资料来源：

• 在 Angular2 中传递多个路由参数
• 如何从 Angular 6 中的路由参数获取多个 ID？