访问pwa地址的url参数

Posted 2023-02-22

【中文标题】访问pwa地址的url参数

【英文标题】：Access url parameters of pwa address

【发布时间】：2017-07-25 22:49:15

【问题描述】：

我是 ionic 2 的新手。在到处搜索后，鉴于以下情况，我找不到直接答案：

我正在使用 ionic 2 构建 PWA（因为我稍后会开发此应用的混合版本） 用户将找到并访问我的应用程序的地址将是一个标准域，例如https://welcometotheapp.com?viewid=0101018737abcdefg 我正在使用 ionic 2，最近安装在 windows 10 上 我已经开始了一个新的空白应用项目 我的问题与导航无关。

我的问题是如何访问 url 参数viewid？我需要这个参数，以便应用程序将其发送到我的服务器端 REST api 并获取正确的 json 数据。我的用户通过 SMS 收到带有参数的 URL 作为链接。 我尝试过使用this question 等几个建议

但我正在旋转我的***。我还观看了 Josh Morony 和其他人的大量 youtube 视频，但没有直接相关。

有人可以帮忙解答这个问题吗？作为一个新手，如果代码片段在给定 ionic2 空白模板结构的情况下使用什么文件中的代码进行注释，那将非常有帮助。谢谢大家！

【参考方案1】：

您可以尝试普通的旧 javascript。我不认为这是特定于离子的。而且因为它主要不是基于导航，所以NavParams 不起作用，我猜。

在.js 中，您可以像这样使用split

let myParam = location.search.split('viewid=')[1];

请注意，如果没有viewId=，那么该变量将是未定义的。这是location.search的文档

【讨论】：

谢谢，我之前已经成功地使用过javascript来做这种事情。就结构而言，如果我创建了一个 .js 文件，比如“readurl.js”，我会将它放在应用程序文件树的什么位置，我将如何引用/调用它？从 url 读取参数是应用程序加载后需要做的第一件事。 json 数据将显示在 home.html 上。

我建议将它添加到构造函数中的app.component.ts。或者取决于您将如何操作构造函数中的home.ts 或ionViewDidLoad() 函数中的数据

感谢您的帮助。就我而言，我最终在 ionViewDidLoad() 函数中将它添加到我的 home.ts 中，因为我只想在初始加载时检索参数。我从文档中了解到，如果放在构造函数中，它会在每次页面加载时运行。就我而言，这是不可取的。再次，非常感谢！

@gerdi 如果 url 的格式是 welcometotheapp.com/astringgoeshere/?key1=value&key2=value2 并且我想在 .com/ 之后读取 url。它会起作用吗？还是其他方式？

【参考方案2】：

我必须使用来自@angular/common 的Location。所以我相信值得发布另一个答案：

import  Location  from '@angular/common';

...

public urlParams: any;

constructor(..., public location: Location) 
    this.initializeURLParams();
    console.log(this.urlParams);


initializeURLParams() 
  const path = this.location.path(true),
    hasParams = /\?(.+?\=.+)1/;
  let params;

  if (hasParams.test(path)) 
    params = ;
    path.split('?')[1].split('&').forEach(both => 
      let e = both.split('=');
      params[e[0]] = e[1];
    );
  

  this.urlParams = params;

【讨论】：

这对我不起作用，在浏览器中。 This.location.path (true) 返回 "" 。但是我只用 ionic:serve 对其进行了测试，不确定生产中会发生什么。但有效的是：location._platformStrategy._platformLocation.location.search;

更新，上面是路径没有#hash的时候。当它确实 location.path 工作正常