在 Ionic 4 中使用查询参数答案

【问题标题】：Using query params in Ionic 4在 Ionic 4 中使用查询参数
【发布时间】：2020-02-28 17:03:36
【问题描述】：

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

扫描二维码后，页面打开。网址如下：

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

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

我在index.html 旁边保留了.htaccess 文件，这样我就可以直接从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 中实现查询参数？

【问题讨论】：

你用什么库来传递参数？路由器链接还是导航？

标签： angular ionic-framework ionic3 ionic4

【解决方案1】：

如果你已经有你发布的 URL

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)
  }
});
}

【讨论】：

问题是当我尝试像这样打开网址时 - https://sapphireprofits.com/qanda/pwa2/home/1/2 其中 /1/2 是参数，我尝试使用 this.url = window.location.href; 获取网址，它打印 https://sapphireprofits.com/qanda/pwa2/home/ 应该在哪里打印https://sapphireprofits.com/qanda/pwa2/home/1/2，我已经在上面粘贴了我的.htaccess，请指导我怎样才能做到这一点？？
据我了解，您称之为外部域，是您的域还是其他人？
我在这个域上托管了应用程序，它是我的域
能把代码html和ts文件贴出来吗？？您在 ionic 应用中打开此链接对吗？
ionic 项目托管在此链接https://sapphireprofits.com/qanda/pwa2/index.html 上，如果我运行https://sapphireprofits.com/qanda/pwa2/index.html/1/2/3 它说页面不存在`，我已经删除了.htaccess，你能指导我如何在@ 之后获取变量987654331@，这就是我所需要的

【解决方案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 }
});

来源：

【讨论】：

这对于路径段是正确的（这可能很有用），但对于查询参数不正确。您需要订阅 this.route.queryParams 来获取查询参数。