Question

在仪表板组件中，我有一个导航栏，其中包含用户个人资料图片。当我在ProfileComponent中更新配置文件图片时，图像会在配置文件组件中更改，但更改不会反映在仪表板组件内部的导航栏中。为了解决这个问题，我进行了通信服务，并且只要在Profile Component中更新配置文件图像时，我都会发出一些消息，并且DashboardComponent应该侦听更改，如果更改存在，则应该运行该方法来更新配置文件详细信息，其中包括该图像但不起作用

updateProfilePic()仅获取配置文件详细信息，因此如果在更改时再次调用它，则可以为属性分配新数据。

{ 
    path: 'dashboard',
    component: DashboardComponent, 
    canActivate: [AuthGuard], 
    children: [
        {
            path: '',
            component: DashboardHomeComponent,
        },
        {
            path: 'profile',
            component: ProfileComponent
        }
}

仪表板组件html

navbar code 
 <router-outlet></router-outlet>

个人资料组件

profilePic: string;
profileDetail: any;
this.auth.updateProfilePic().subscribe((res: any)=>{
    this.profilepic = res.picLink;
    this.auth.updateProfileDetails().subscribe((res2)=>{
        this.profileDetail = res2;
        this.comService.emitChange();
    });
});

仪表板组件

ngOnInit() {
    this.auth.updateProfileDetails().subscribe((res)=>{
        this.profileDetail = res;
    });
}

this.comService.changeEmitted$.subscribe(data => {
    // if there are changes then updateProfile method should be called
})

交流服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommunicationService {

  constructor() { }
  private emitChangeSource = new Subject<any>();

    changeEmitted$ = this.emitChangeSource.asObservable();

    emitChange() {
        this.emitChangeSource.next();
    }
}

Answer 1

在您的CommunicationService中，建议添加以下代码

@Injectable()
export class CommunicationService {
    updated: Subscriber<boolean>;
    updateState: Observable<boolean> = new Observable((observer) => {
        this.updated = observer;
        this.updated.next(true);
    });
}

因此，当您要通知侧边栏更改时，只需运行this.updated.next(true);

然后，在SidebarComponent的构造函数中，您可以像这样订阅Observable：

constructor(private communicationService: CommunicationService) {
    this.communicationService.updateState.subscribe(r => this.yourFunction());
}

如果配置文件图片已更新，如何通知另一个组件，以便反映更改

1 个答案: