如何强制其他 angular 组件刷新和更新视图？

Question

我正在开发一个 Angular +2 应用程序，我们在其中为用户提供一个 'update your profile' 页面。允许用户从 "JSmith to "JDoe 更新他们的用户名。我们在右上角有一个单独的菜单组件，显示一些基本的用户数据——用户名、电子邮件等。

问题：在用户更新他们的用户名后，我希望保存方法也触发对菜单组件的更新，以便显示的信息——用户名等——也得到更新。

问题：对特定组件执行更改的技术是什么？

Answer 1

您需要有一个服务并公开一个 Observable<UserInfo> 然后您的所有组件，如菜单、工具栏和...订阅此服务以获取 UserInfo，然后当用户信息更改时，您只需要next 那个可观察的，一切都会自动更新

Answer 2

您可以创建一个将 username 、 email 等属性作为 public 静态属性的服务。所以你可以更新一个组件中的静态变量并在另一个组件中读取它们，它会立即改变。（这 2 个组件将处理存储在服务中的相同属性，一个组件将更改这些属性，另一个组件将直接从中读取）。

Answer 3

如果您想通知其他组件数据的更改，您可以使用事件模型。基本上，您创建一个注入到您的组件中的单例服务。此服务有一个 Subject 字段，可用于广播更改以及订阅该广播。

userMenu.component.ts

import { Component, OnInit } from '@angular/core';
import { UserStateService } from './userState.service';

export class UserMenuComponent implements OnInit {
    constructor(private readonly userStateService: UserStateService) { }

    ngOnInit() {
        this.userStateService.userChanged
            .asObservable()
            .subcribe(userInfo => {/* do something */});
    }
}

userInput.component.ts

import { Component, OnInit } from '@angular/core';
import { UserStateService } from './userState.service';

export class UserInputComponent {
    userData: any;
    constructor(private readonly userStateService: UserStateService) { }

    onSave() {
        this.userStateService.userChanged.next(this.userData);
    }
}

userState.service.ts

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

@Injectable({ providedIn: 'root' })
export class UserStateService {
    userChanged = new Subject();
}

如何强制其他 angular 组件刷新和更新视图？

How to force other angular components to refresh and update the view?

angular2-changedetection

angular