Question

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

Answer 1

刷新页面不需要特定于角度的代码。 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中两个组件之间进行交谈的方式，但是在OnSen中，我认为它没有什么不同。如果我错了，请纠正我。

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

从新产品组件中，我将其替换为产品列表页面，而不仅仅是弹出它。这样做将在堆栈顶部创建包含新数据的新产品列表。但随后，堆栈中将有2个产品列表。刷新数据排在第一位，旧数据排在第二位。现在，从堆栈中删除第二个最重要的产品列表，您现在就很好了。

下面是我的代码。

this.navi.nativeElement.replacePage（ProductListPageComponent，{slide：‘left’}）; this.navi.nativeElement.removePage（1）; // 1表示前一个ProductListPageComponent的索引，这取决于您的情况。

请告诉我是否有更好的方法。

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

2 个答案: