如何在另一个角度2组件中设置变量

问题描述：

我正在构建一个Angular 4应用程序，我有两个单独的页面，一个详细信息页面和一个编辑页面，每个页面都有自己的组件。如何在另一个角度2组件中设置变量

当用户编辑在编辑页面上的模型，我重定向他们回到详情页是这样的：

// This is within my RetailerEditComponent 
save(): void { 
    this.retailerService.updateRetailer(this.retailer) 
     .then(() => this.router.navigate(['/admin/retailer'])); 
}

在管理/零售商页，我有一个RetailerDetailComponent，看起来像这样：

export class RetailerDetailComponent { 
    retailer: Retailer; 

    public hasBeenUpdated: boolean = false; 

    constructor(
     private retailerService: RetailerService, 
    ) { 
     console.log("in RetailerDetailComponent"); 
    } 
}

如何从其他页面将bool hasBeenUpdated设置为true？

更新：

我喜欢EventEmitter的想法，但遇到了问题。

我RetailerService：

export class RetailerService { 
    public OnRetailerUpdated = new EventEmitter();; 

    updateRetailer(retailer: Retailer): Promise<Retailer> { 
     this.OnRetailerUpdated.next(true); 
     return new Promise((resolve, reject) => { 
      apigClient.retailerVPut({}, retailer, {}) 
       .then(function (result) {        
         resolve(result.data[0]) 
       }).catch(function (result) { 
         reject(result) 
       }); 
       } 
      }) 

     }); 
    } 

}

在我RetailerDetailComponent：

出口类RetailerDetailComponent实现LoggedInCallback { 零售商：零售商;

public showError: boolean; 

constructor(
    private retailerService: RetailerService) { 

} 
ngOnInit(): void { 
    this.retailerService 
     .OnRetailerUpdated 
     .subscribe(value => { 
      this.showError = true; 
      console.log('Event thingy worked') 
     }); 
}

但是控制台消息显示不出来

请参阅更新，布尔失踪在偶数发射器：'新EventEmitter （）;' – Faisal

答

最好的方法是与EventEmitter一起使用订阅。下面的例子：

您可以在零售商的服务定义事件发射器：

公共OnRetailerUpdated =新EventEmitter <布尔>（）;

然后，在你 “updateRetailer” 方法中，添加这一行：

this.OnRetailerUpdated.next（真）;

SUBCRIBE此事件在你RetailerDetailComponent：

this.retailerService .OnRetailerUpdated .subscribe（值=> {// 执行适当的行动}）;

private subscription; 

ngOnInit() { 
    this.subscription = this.retailerService.OnRetailerUpdated 
          .subscribe(value => { 
           // Perform the appropriate action here 
    }); 
}; 

ngOnDestroy() { 
    this.subscription.unsubscribe(); 
};

开始=>

我在哪里将步骤3中的代码放入我的组件中？ –

@RobbieMills你可以把它放在ngOnInit（）中，记住要在视图被销毁之后取消订阅，以避免任何内存泄漏或多个订阅。看到我更新的答案。 – Faisal

谢谢，已更新我的问题 –

答

使用例如RetailerService共享组件之间的公共变量。

答

您有几种选择在这里：

第一个是创建地图服务指示哪个零售商都在更新，并将其值设置，当你调用updateRetailer方法内部的零售商。

public retailersUpdateStates: { [id: string]: Retailer } = {};

和检查状态的方法：

public hasBeenUpdated(retailer: Retailer) { 
    return !!this.retailersUpdateStates[retailer.id] 
}

当调用方法：

retailersUpdateStates[retailer.id] = true;

而在你的组件：

public get hasBeenUpdated() { 
    return this.retailersService.hasBeenUpdated(this.retailer); 
}

第二个会请添加hasBeendUpdated财产到Retailer模型并相应地更新它。在你的组件模板，你可以这样做：

{{ retailer?.hasBeenUpdated }}

第三个是去同一个路由器PARAM这是零售商ID已木珠更新。（但这似乎不是那种幻想）。

还有更多的方法，例如使用ngrx进行状态管理。有了这个“单一的真相源”，分享各个组成部分的国家或使用rxjs主体来管理零售商的状态将是一件轻而易举的事情，正如@ faisal的答案中所描述的那样。

这是一个非常合理的做法。或者，您可以通过路由参数传递该值：https：//angular.io/guide/router#route-definition-with-a-parameter – jbin

是的，这会将状态绑定到url，这可能是好的在某些情况下，但可能会产生一些不需要的UI效果，因为用户可以随时访问该URL并告诉他该组件已更新，即使它没有更新。 – cyrix

如何在另一个角度2组件中设置变量

相关推荐