如何从另一个角度刷新组件? [英] How to refresh a component from another in angular?

问题描述

我目前正在学习 angular，并在很长一段路要开发一个小型应用程序.我的应用程序包含多个组件，其中一些允许使用执行一些 crud 操作.但是，我面临着一个我已经好几天都无法解决的问题.

I am currently learning angular and developing a small application a long the way. My application contains multiple components, some of which allowing the use to perform some crud operations. However, I am facing a problem that I have not been able to solve for days now.

该应用将数据分类为用户可以更新的不同类别.但是当用户更新一个组件中的数据然后导航到另一个组件时.用户导航到的组件不知道更新，因此不会刷新.我知道我可以使用 window.location.reload() 重新加载整个应用程序，但我认为在每次更新时重新加载应用程序违背了构建 SPA 的初衷.

The app classify the data in different categories which the user can update. But when the user update the data in one component and then navigates to another. The component the user navigates to does not know of the update and thus does not refresh. I know I could use window.location.reload() to reload the entire app, but I think reloading the application on each update defeats the purpose of building a SPA in the first place.

有没有办法在更新另一个组件的数据后刷新另一个组件?

Is there a way to refresh a component after updating data on another?

推荐答案

为了刷新，或者说从不同的组件更新另一个组件，我们可以使用 Observables 和 主题(这是一种 Observable).当从 API 接收数据以进行 CRUD 操作时，此概念具有额外好处.

To refresh, or better to say update another component from a different component, we can use the concept of Observables and Subject (which is a kind of Observable). This concept has an added benefit when data are to be received from APIs for CRUD operations.

Subject 允许将值多播到 Observers，它们注册为侦听 Subject.Subject 就像一个 EventEmitter，简单来说，如果你想触发一个更新，你可以发出新的值，它可以发送到你想要更新的所有组件.从技术上讲，我们通过在 Subject 中提供新值来做到这一点，只需调用 next(newValue)，然后它就可以发送给所有需要 Observers 的Observers>订阅吧.

Subject allows values to be multicasted to Observers, which are registered to listen to the Subject. Subject is like an EventEmitter, in simple terms, if you want to trigger an update, you can emit the new values and it can be sent to all components that you want to update. Technically, we do this by feeding the new value in Subject, by just calling next(newValue), and then it can be sent to all Observers who then need to subscribe it.

以消息为例 - 一个组件发送/更新一个字符串，另一个组件需要监听它并接收/更新相同的内容.

Taking an example where a message - a string is sent/updated by one component and the other component needs to listen to it and receive/update the same.

我们使用公共服务在这些组件之间进行通信.

We use a common service to communicate between these components.

    import { Injectable } from '@angular/core';
    import { Observable, Subject } from 'rxjs';
    
    @Injectable({ providedIn: 'root' })
    export class CommonService {
        private subjectName = new Subject<any>(); //need to create a subject
    
        sendUpdate(message: string) { //the component that wants to update something, calls this fn
            this.subjectName.next({ text: message }); //next() will feed the value in Subject
        }
    
        getUpdate(): Observable<any> { //the receiver component calls this function 
            return this.subjectName.asObservable(); //it returns as an observable to which the receiver funtion will subscribe
        }
    }

现在下面是一个想要更新一些值/想要发送消息的组件.

Now below is a component that wants to update some values/wants to send the message.

    import { Component } from '@angular/core';
    import { CommonService } from 'provide proper path';
    
    @Component({ templateUrl: 'sender.component.html' })
    export class SenderComponent {
        constructor(private Service: CommonService) { } //mention the service in constructor
    
        sendMessage(): void {
            // send message to subscribers via observable subject
            this.Service.sendUpdate('Message from Sender Component to Receiver Component!');
        }
    
    }

现在下面是一个想要监听更新的接收器组件

Now below is a receiver component that wants to listen to the update

    import { Component, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { CommonService } from 'provide proper path';
    
    @Component({
        templateUrl: 'receiver.component.html'
    })
    
    export class ReceiverComponent implements OnDestroy {
        messageReceived: any;
        private subscriptionName: Subscription; //important to create a subscription
    
        constructor(private Service: CommonService) {
            // subscribe to sender component messages
            this.subscriptionName= this.Service.getUpdate().subscribe
             (message => { //message contains the data sent from service
             this.messageReceived = message;
             });
        }
    
        ngOnDestroy() { // It's a good practice to unsubscribe to ensure no memory leaks
            this.subscriptionName.unsubscribe();
        }
    }

如果您想阅读有关主题的更多信息，您可能会看到以下链接:
firebaseapp.com/guide/subject
https://jasonwatmore.com/post
rxjs-understanding-subjects

If you want to read more on Subjects, you may see following links:
firebaseapp.com/guide/subject
https://jasonwatmore.com/post
rxjs-understanding-subjects

这篇关于如何从另一个角度刷新组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！