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

2024-04-16

我正在构建一个 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?

Update:

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

我的零售商服务:

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)
                 });
                }
            })

        });
    }

}

在我的 RetailDetailComponent 中:

导出类 RetailerDetailComponent 实现 LoggedInCallback { 零售商:零售商;

public showError: boolean;

constructor(
    private retailerService: RetailerService) {

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

但控制台消息不显示


您在这里有几个选择:

第一个是在您的服务中创建一个零售商地图,该地图指示哪些零售商已更新并在您调用时设置值updateRetailer method.

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 }}

第三个是使用路由器参数,即已更新的零售商 ID。 (但这似乎并不那么花哨)。

还有更多方法,例如使用ngrx https://github.com/ngrx/platform用于状态管理。有了这个“单一事实来源”,跨组件共享状态或使用 rxjs 主题来管理零售商状态将变得轻而易举,如 @faisal 的答案中所述。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在另一个角度2分量中设置变量 的相关文章

随机推荐