时间戳

首页 > 解决方案 > 如何强制其他角度组件刷新和更新视图？

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

问题描述

我正在开发一个 Angular +2 应用程序，我们在其中为用户提供“更新您的个人资料”页面。用户可以将他们的用户名从“JSmith”更新为“JDoe”。我们在右上角有一个单独的菜单组件，显示一些基本的用户数据——用户名、电子邮件等。

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

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

标签： angularangular2-changedetection

解决方案

如果您想通知其他组件对数据的更改，您可以使用事件模型。基本上，您创建一个注入到组件中的单例服务。该服务有一个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();
}

推荐阅读