angular - 如何从另一个 Angular 刷新组件？

Question

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

8 个月前关闭。




Improve this question




我目前正在学习 angular 并在很长一段时间内开发一个小型应用程序。我的应用程序包含多个组件，其中一些允许使用执行一些 crud 操作。但是，我面临着一个我已经好几天都无法解决的问题。
该应用程序将数据分类为用户可以更新的不同类别。但是当用户更新一个组件中的数据然后导航到另一个组件时。用户导航到的组件不知道更新，因此不会刷新。我知道我可以使用 window.location.reload() 来重新加载整个应用程序，但我认为在每次更新时重新加载应用程序首先违背了构建 SPA 的目的。
有没有办法在更新另一个组件的数据后刷新组件？

Answer 1

为了刷新，或者说从不同的组件更新另一个组件，我们可以使用 Observables 的概念。和 Subject (这是一种 Observable)。这个概念有一个 附加福利何时从 API 接收数据以进行 CRUD 操作。
主题允许将值多播到 Observers , 注册为收听主题。主题就像一个 EventEmitter ，简单来说，如果你想触发更新，你可以发出新的值，它可以发送到你想要更新的所有组件。从技术上讲，我们通过在主题中提供新值来实现这一点，只需调用 next(newValue) ，然后可以发送给所有Observers谁再需要subscribe它。
举一个例子，一个消息 - 一个字符串由一个组件发送/更新，另一个组件需要监听它并接收/更新它。
我们使用公共(public)服务在这些组件之间进行通信。

    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-understanding-subjects