Angular.io - 在回调中重新加载/刷新组件

Question

我是 Angular.io 的初学者。

我创建了 2 个组件：“HeaderComponent”充当页眉，“RestaurantComponent”充当页面正文。

HeaderComponent中有一个“添加餐厅”按钮，点击它会在灯箱（模态）中显示一个表单。

点击提交按钮时，添加餐厅表单将调用 API：

this.restaurantService.addRestaurantDetails(newRestaurant)
      .subscribe(restaurant => {
        location.reload(); //this will caused it reload entire page

});  

我需要的是在我的表单中单击“提交”，然后刷新当前组件（在这种情况下为餐厅组件）。如果我在另一个组件，例如“DashboardComponent”，我也想刷新 Dashboard 组件。

此外，我也想知道如何在回调函数中重定向到另一个组件。例如。我在 RestaurantComponent，当我点击表单提交按钮时，我想导航到 DashboardComponent。

提前谢谢你！

Answer 1

当 @input 参数被更新时，角度控件也会被更新。但是您不能从另一个控件更新它们，因为它会导致众所周知的异常。相反，您可以将它们绑定到服务的属性。预期的设计是将所有数据存储在服务中，并且组件上的输入字段绑定到这些服务的属性值。然后，如果您修改服务中的属性（例如，从后端接收到答案），其输入字段绑定到该服务的相应字段的控件将自动更新。

基本上，角度检查每个活动控件的@Input 字段在每个时间点上，如果它被更改，它会请求重绘。