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

Question

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

Answer 1

NMG49-谢谢你的帮助。是的，这是Angular中两个组件之间对话的方式，但在OnSen中，我认为它没什么不同。如果我错了，请纠正我。

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

从我的产品新组件中，我将其替换为产品列表页，而不是仅仅弹出它。这样，新产品列表将使用新数据在堆栈顶部创建。但是，然后将有2个产品列表在堆栈中背靠背。刷新数据居前，旧数据居第二。现在从stack中删除排名第二的产品列表，您现在就好了。

下面是我的代码。

这导航。nativeElement。replacePage（ProductListPageComponent，{幻灯片：'left'}）；这导航。nativeElement。删除第（1）页；//1表示前一个ProductListPageComponent的索引，这在您的情况下会有所不同。

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

Answer 2

刷新页面不需要特定角度的代码<代码>位置。重载（）就可以了。

尽管如此，在这里进行页面刷新将是一个坏主意。不仅用户可能会有明显的延迟，而且页面重置会清除整个前端状态。这意味着通过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中，您不必首先刷新屏幕。