Доступ к параметрам URL адреса pwa

Я новичок в ionic 2. После поиска везде я не могу найти прямого ответа, учитывая следующий сценарий:

  1. Я создаю PWA с ionic 2 (потому что позже я буду разрабатывать гибридные версии этого приложения).
  2. адрес, по которому пользователи будут находить и получать доступ к моему приложению, будет стандартным доменом, например https://welcometotheapp.com?viewid=0101018737abcdefg
  3. Я использую ionic 2, недавно установленный на Windows 10.
  4. Я начал новый пустой проект приложения
  5. Мой вопрос НЕ связан с навигацией.

Мой вопрос: как мне получить доступ к параметру URL-адреса viewid? Мне нужен этот параметр, чтобы приложение отправляло его на мой REST API на стороне сервера и получало правильные данные json. Мои пользователи получают URL с параметром в виде ссылки по SMS. Я пытался использовать несколько предложений, таких как этот вопрос

Но я прокручиваю свои колеса. Я также смотрел довольно много видеороликов на YouTube от Джоша Морони и других, но опять же ничего не связанного напрямую.

Может ли кто-нибудь помочь с этим вопросом? Как новичок, было бы очень полезно, если бы фрагменты кода были аннотированы с тем, какой код находится в каком файле, учитывая пустую структуру шаблона ionic2. Спасибо!


ionic-framework progressive-web-apps url-parameters ionic2
person detourOfReason    schedule 06.03.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете попробовать старый добрый javascript. Я не думаю, что это что-то конкретное для ionic. И поскольку это в первую очередь не основано на навигации, я предполагаю, что NavParams не будет работать.

В .js вы можете сделать split вот так

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

Обратите внимание, что если viewId= нет, то переменная будет неопределенной. Вот документы для location.search.

person Community    schedule 06.03.2017
comment
Спасибо, я успешно использовал javascript для подобных вещей раньше. Итак, что касается структуры, если бы я создал файл .js, такой как readurl.js, где бы я разместил его в дереве файлов приложения и как бы я мог ссылаться/вызывать его? Чтение параметра из URL — это первое, что должно сделать приложение после загрузки. Данные json будут отображаться на home.html. - person detourOfReason; 06.03.2017
comment
Я бы предложил добавить его в app.component.ts в конструкторе. Или в зависимости от того, как вы собираетесь манипулировать данными, home.ts в конструкторе или функцией ionViewDidLoad() - person ; 07.03.2017
comment
Спасибо за вашу помощь. в моем случае я добавил его в свой home.ts в функции ionViewDidLoad(), потому что я хочу получить параметры только при начальной загрузке. Насколько я понимаю из документации, если его поместить в конструктор, он будет запускаться каждый раз при загрузке страницы. В моем случае это нежелательно. Еще раз большое спасибо! - person detourOfReason; 12.03.2017
comment
@gerdi, если URL-адрес имеет вид welcometotheapp.com/astringgoeshere/?key1=value&key2=value2 и я хочу прочитать URL-адрес после .com/. это будет работать? или как-то иначе? - person Vivek Sinha; 24.05.2017

arrow_upward
1
arrow_downward

Мне пришлось использовать Location из @angular/common. Поэтому я считаю, что стоит опубликовать еще один ответ:

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;
}
person tuliomarchetto    schedule 02.03.2018
comment
Это не сработало для меня в браузере. This.location.path (true) вернул . Однако я тестировал его только с ionic:serve, не уверен, что произойдет в продакшене. Однако сработало следующее: location._platformStrategy._platformLocation.location.search; - person Michael; 17.05.2018
comment
Обновление, приведенное выше было, когда путь не имеет # хеша. Когда это происходит, location.path работает нормально - person Michael; 17.05.2018