如何在不刷新页面的情况下更新组件内部的值？答案

【问题标题】：how can i update value inside component without refresh page?如何在不刷新页面的情况下更新组件内部的值？
【发布时间】：2018-10-03 16:03:28
【问题描述】：

我有这个组件。

  constructor(private cs : CredentialsService) { 

    this.fullname  = this.cs.getFullname();
    this.address  = this.cs.getAddress();
    this.telp  = this.cs.getTelp();
    this.photo = this.cs.getPhoto();
    if(this.photo == ""){
        this.photo = "https://via.placeholder.com/150x150"
      }else{
        this.photo = "http://localhost:84/ELEARNINGAPI/upload/" + this.photo
      }     this.email  = this.cs.getEmail();

  }

还有这个服务CredentialsService（从本地存储用户信息）。

export class CredentialsService {

    credentials : any;

  constructor(private apiservice : LoginapiService) {

    this.credentials = JSON.parse(this.apiservice.getLogginCredentials());
    if(this.credentials == null){
      this.apiservice.logout();
    }
  }

  getFullname(){
    return this.credentials.fullname;
  }

  getEmail(){
    return this.credentials.email;
  }

  getAddress(){
        return this.credentials.address;
  }

  getTelp(){
    return this.credentials.telpno;
  }

  getPhoto(){
    return this.credentials.profilpict;
  }

}

这是我的apiservice.getLogginCredentials()

getLogginCredentials(){
        return localStorage.getItem("Credentials"); 
    }

正如您在我的component constructor 中看到的那样，我从 CredientialsService 获得了价值。这就是我设置 CredentialsService 的方式

     this.loginapi.setLogginCredentials("somejson");
      --
     setLogginCredentials(UserInfo){
            localStorage.setItem("Credentials" , JSON.stringify(UserInfo));
        }

我有一个update component 可以用新值重新设置setLogginCredentials。所以我的问题是当我用新值更新值时，我仍然需要刷新整个页面来刷新组件构造函数中的值。

【问题讨论】：

标签： angular angular6

【解决方案1】：

您可以使用反应式方法。订阅 Observable/Subject，您的组件将自动更新。这是一个示例，根据您的需要进行更改：

import { BehaviorSubject } from "rxjs";

export class Service {
    loginCred$: BehaviorSubject<string> = new BehaviorSubject(this.getLogginCredentials());

    getLogginCredentials() {
        return localStorage.getItem("Credentials");
    }

    setLogginCredentials(UserInfo) {
        const creds = JSON.stringify(UserInfo)
        localStorage.setItem("Credentials", creds);
        this.loginCred$.next(creds);
    }

    getCredsSubject() {
        return this.loginCred$;
    }
}

export class Component {
    private creds: string;
    constructor(private service: Service) {
        service.getCredsSubject().subscribe(creds => {
            this.creds = creds;
        });
    }
}

【讨论】：

我尝试你的方式，但是当我刷新时。值变为空

【解决方案2】：

Angular 在触发事件时自动更新视图，它被命名为change detection。此类异步事件是可观察的、承诺的或超时的。

您的代码中的问题是localStorage.setItem 不会触发任何事件。要解决这个问题，您可以模拟一个事件，只需将您的 setItem 放在 0s 超时之后，或者您可以使用像 angular-local-storage 这样的模块来为您带来魔力。

第一种情况：

setTimeout(() =>  localStorage.setItem("Credentials" , JSON.stringify(UserInfo)), 0);

【讨论】：