如何从另一个角度刷新组件？

Question

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

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

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

Answer 1

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

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

以消息- 字符串由一个组件发送/更新而另一个组件需要收听它并接收/更新相同的消息为例。

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

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

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

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

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

    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认识，主题