Как загрузить тот же продукт после обновления окна браузера в Angular 6 - PullRequest
Новая
       44

Как загрузить тот же продукт после обновления окна браузера в Angular 6

0 голосов
/ 04 июля 2018

Я новичок в мире разработки, я работаю в угловом приложении. Это приложение для электронной коммерции.

Что я хочу знать, так это то, что у меня есть 2 компонента из первого компонента. Я перечислил некоторые продукты. Если пользователь щелкнул любой из продуктов, будет вызван второй компонент и показаны сведения о выбранном продукте, я завершил его. и работает нормально.

Здесь, если пользователь обновляет окно браузера, я должен показывать те же данные о продукте после обновления. Но в моем случае код продукта «неопределенный» после обновления (я не мог вызвать API с неопределенным код). Так что я использовал локальное хранилище, чтобы сохранить код продукта и получить его, когда вызывается второй компонент.

Если из первого компонента не передается код продукта, я использовал значение локального хранилища для вызова API.

Но любой может отредактировать значения локального хранилища , если он отредактирован, API вернет какой-либо другой продукт или сообщения об ошибке.

Я хочу запретить его редактирование или я ищу другую логику для безопасного разрешения этой ситуации .

Может ли кто-нибудь помочь мне решить эту проблему.

Спасибо.

код: 

get_Product_Code(productCode: string) {

    if (productCode == "undefined") {
      this.selectedProduct = localStorage.getItem('Item_Code');
    } else {
      this.selectedProduct = productCode;
    }
    let key = 'Item_Code';
    localStorage.setItem(key, this.selectedProduct);
  }

Ответы [ 3 ]

0 голосов
/ 04 июля 2018

Я думаю, что вы забыли добавить typeof

If(typeof productCode == "undefined"){
}
0 голосов
/ 04 июля 2018

использовать параметры URL ..

сначала добавьте параметр к маршруту компонента:

Модуль: 

  { path: 'product/:id', component: ProductComponent },

Ваш URL: 

yourapp/product/789329048

где 789329048 идентификатор вашего продукта

затем в компоненте вашего продукта .. читайте URL как: 

 this.sub = this.route.params.subscribe(params => {

            let productid = params['id'];
}

затем передайте значение productid в API для получения подробной информации.

0 голосов
/ 04 июля 2018

Вместо локального хранилища вы можете использовать второй компонент на основе маршрута, который будет иметь идентификатор в URL-адресе, например /product/12132, где 12132 - это идентификатор продукта. Когда пользователь перезагружает страницу, вы проверяете, является ли это действительным проектом. Если это так, показать проект или перенаправить на первый компонент или страницу 404.

...