如何在 OnSen 和 Angular 2+ 当前页面关闭后刷新上一页

Question

我有一个产品列表页面，其中显示了所有产品的列表。从这个页面有 link 可以在我添加新产品的产品新页面上打开。在数据库中添加产品后，我想在当前产品新页面关闭后在我以前的产品列表页面中显示新添加的产品。我找不到任何解决方案来将新添加的产品传递回上一页或刷新它以重新加载产品列表。你能帮我解决这个问题吗？

Answer 1

不需要 angular 特定的代码来刷新页面。 location.reload() 会成功的。

话虽这么说，但在这里刷新页面并不是一个好主意。不仅对用户来说会有明显的延迟，而且页面重置会清除整个前端状态。这意味着通过 angular 实现的任何功能都会在页面重新加载时设置回默认值。因此，在使用 angular 或 react 等客户端库进行字体端开发时，我们希望不惜一切代价避免重新加载页面。

相反，您应该开发一个客户端解决方案，以便在用户将新产品提交到数据库后显示您的新产品。您已经在本地拥有所有信息（因为您刚刚提交了！），没有理由您必须再次查询数据库才能取回。

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>

如果您像这样构建代码，那么新产品将自动出现在 UI 中，您无需首先刷新屏幕。

Answer 2

nmg49 - 感谢您的帮助。是的，这就是 Angular 中 2 个组件之间的对话方式，但我认为在 OnSen 中它略有不同。如有不妥请指正

总之我实现了我想要的。这可能不是最佳做法或正确的做法，但我会坚持下去，直到找到更好的解决方案。

在我的新产品组件中，我将其替换为产品列表页面，而不仅仅是弹出它。这样做会在堆栈顶部创建新的产品列表，其中包含新数据。但随后堆栈中会有 2 个产品列表背靠背。最上面是更新的数据，第二个是旧数据。现在从堆栈中删除第二个顶级产品列表，你现在好了。

下面是我的代码。

this.navi.nativeElement.replacePage(ProductListPageComponent,{slide:‘left’}); this.navi.nativeElement.removePage(1); // 1 表示上一个 ProductListPageComponent 的索引，这在您的情况下会有所不同。

如果有更好的方法，请告诉我。

如何在 OnSen 和 Angular 2+ 当前页面关闭后刷新上一页

How to refresh previous page after current page closes in OnSen and Angular 2+

onsen-ui2

angular