Как обновить предыдущую страницу после закрытия текущей страницы в OnSen и Angular 2+

Question

У меня есть страница со списком товаров, где я показываю список всех товаров.С этой страницы есть ссылка, чтобы открыть на новой странице продукта, где я добавляю новый продукт.После добавления продукта в БД я хочу показать недавно добавленный продукт на моей предыдущей странице со списком продуктов после закрытия текущей страницы нового продукта.Я не смог найти решение, чтобы передать вновь добавленный продукт на предыдущую страницу или обновить его, чтобы перезагрузить список продуктов.Не могли бы вы помочь мне с этим.

Answer 1

nmg49 - Спасибо за вашу помощь.Да, так можно говорить между двумя компонентами в Angular, но в OnSen я думаю, что это немного отличается.Пожалуйста, поправьте меня, если я ошибаюсь.

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

Из нового компонента продукта я заменил его на страницу со списком продуктов, а не простовыскакивая это.При этом новый список товаров будет создан поверх стека со свежими данными.Но тогда в стеке будет 2 списка товаров.Вершина с обновленными данными, вторая вершина со старыми данными.Теперь удалите второй верхний список товаров из стека, и теперь все в порядке.

Ниже приведен мой код.

this.navi.nativeElement.replacePage (ProductListPageComponent, {slide: 'left'});this.navi.nativeElement.removePage (1);// 1 представляет индекс предыдущего ProductListPageComponent, в вашем случае он будет другим.

Пожалуйста, дайте мне знать, если есть лучший способ сделать это.

Answer 2

Для обновления страницы не требуется специальный угловой код.location.reload() сделает свое дело.

При этом, обновление страницы здесь было бы плохой идеей.Мало того, что может быть значительная задержка для пользователя, но сброс страницы стирает все состояние внешнего интерфейса.Это означает, что любая функциональность, реализованная с помощью angular, при перезагрузке страницы возвращается к настройкам по умолчаниюПо этой причине, когда мы выполняем разработку шрифтов с использованием клиентской библиотеки, такой как angular или Reaction, мы хотим избежать перезагрузки страницы любой ценой.

Вместо этого вам следует разработать клиентское решение дляпокажите свой новый продукт после того, как пользователь отправит его в базу данных.У вас уже есть вся информация локально (потому что вы только что отправили ее!), Нет никакой причины, по которой вам нужно снова запрашивать базу данных, чтобы получить ее обратно.

let products = [];

// Pretend this is the product that we're adding
let product:Product = new Product('my favorite product');

sendToDb(product);
products.add(product);

Предположим, продукт выглядит следующим образом:

class Product {
  name:string

  constructor(name:string) {
    this.name = name;
  }
}

Затем, на ваш взгляд:

<ul *ngFor="let products of product">
  <li>{{product.name}}</li>
</ul>

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