在Angular 2中的多个组件中全局保持和访问值

问题描述 投票：17回答：5

我有一个设置页面，用户可以在其中保存一些配置变量，例如用户名。用户还可以更改该页面上的用户名。但是当我转到另一个组件（页面）并返回时，用户名不会保存。

我还想在其他组件中显示用户名。我怎么做？有一个全局变量？

结构： - 应用程序 - app.ts（主要） - setting.ts - someOtherComponent.ts

angular angular2-services
5个回答
33
投票

您需要的是维护变量状态的服务。然后，您可以将该服务注入任何组件以设置或获取该变量。

这是一个例子（/services/my.service.ts）：

import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    private myValue;

    constructor() {}

    setValue(val) {
        this.myValue = val;
    }

    getValue() {
        return this.myValue ;
    }
}

您可能希望将该服务放在应用程序引导功能的提供程序数组中（可能位于主应用程序组件文件中，也可能位于单独的文件中，具体取决于您的操作方式）。

在您的主应用程序文件（/app.ts）中：

import {MyService} from './services/my.service';
bootstrap(App, [MyService, COMMON_DIRECTIVES, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS]); // directives added here are available to all children

您不需要在数组中使用COMMON_DIRECTIVES和其他全部大写项目，但通常只包括这些项目，以便您不必在编写的每个组件中配置它们。

然后，您将从这样的组件（/components/some-component.ts）中访问该服务：

import {MyService} from '../services/my.service';

@Component({
    selector: 'some-component',
    template: `
<div>MyValue: {{val}}</div> 
`
})
export class SomeComponent {
    constructor(private myService:MyService) {
    }

    get val() {
        return this.myService.getValue();
    }
}

您可能还希望添加到服务中，以便将值保存到某处（半）永久性，以便下次用户进入应用程序时可以访问它。

9
投票

这可能对你目前的情况来说太过分了，但是如果你要将你的应用程序扩展到更大的应用程序，这可能会为你节省很多麻烦。也就是说，我相信Angular与Redux-like商店是一个非常强大的组合。我的建议是使用ngrx/store模块。

RxJS为Angular应用程序提供动力状态管理，受Redux的启发

资料来源：ngrx/store GitHub repo

下面的代码应概述将ngrx/store集成到应用程序中所需遵循的所有步骤。为简洁起见，我省略了您可能拥有的任何现有代码以及您需要添加的所有导入。

安装模块

npm install --save ngrx/core ngrx/store

创建一个Reducer

export const SETTINGS_UPDATE = 'SETTINGS_UPDATE';

const initialState = {
    username: ''
};

export function settingsReducer(state: Object = initialState, action: Action) {
    switch (action.type) {
        case SETTINGS_UPDATE:
            return Object.assign({}, state, action.payload);
        default:
            return state;
    }
};

导入StoreModule

@NgModule({
    imports: [
        // your other imports
        StoreModule.provideStore({
            settings: settingsReducer
        })
    ]
})
export class AppModule {
    //
}

为Settings Reducer创建界面

export interface SettingsStore {
    username: string;
}

创建商店界面

export interface AppStore {
    settings: SettingsStore;
}

创建设置服务

@Injectable()
export class SettingsService {

    settings$: Observable<SettingsStore>;

    constructor(private store: Store<AppStore>) {
        this.settings$ = this.store.select('settings');
    }

    public update(payload) {
        this.store.dispatch({ type: SETTINGS_UPDATE, payload });
    }

}

设置组件控制器

@Component({
    ...
})
export class SettingsComponent implements OnInit {

    settings$: Observable<SettingsStore>;

    constructor(private settingsService: SettingsService) {
        //
    }

    ngOnInit() {
        this.settings$ = this.settingsService.settings$;
    }

    public updateUsername() {
        this.settingsService.update({ username: 'newUsername' });
    }

}

设置组件模板

<p *ngIf="(settings$ | async)?.username">
    <strong>Username:</strong>
    <span>{{ (settings$ | async)?.username }}</span>
</p>

<button (click)="updateUsername()">Update Username</button>

通过上面概述的设置，您可以将SettingsService注入任何组件并在其模板中显示该值。

同样，您也可以使用store从任何组件更新this.settingsService.update({ ... });的值，并且更改将反映在使用该值的所有地方 - 无论是通过async管道的组件还是通过.subscribe()的其他服务。

3
投票

您需要一个服务，这样您就可以在任何需要的地方注入它：

@Injectable()
export class GlobalService{
  private value;

  constructor(){

  }

  public setValue(value){
    this.value = value;
  }

  public getValue(){
    return this.value;
  }
}

您可以在所有模块中提供此服务，但您可能会获得多个实例。因此，我们将使服务成为单身人士。

@NgModule({
  providers: [ /* DONT ADD THE SERVICE HERE */ ]
})
class GlobalModule {
  static forRoot() {
    return {
      ngModule: GlobalModule,
      providers: [ GlobalService ]
    }
  }
}

你应该只在你的forRoot中调用AppModule方法：

@NgModule({
  imports: [GlobalModule.forRoot()]
})
class AppModule {}
2
投票

弗拉基米尔正确地提到了ngrx。

我会使用Subject / BehaviourSubject和Observable服务到set和get我需要的状态（值）。

我们在这里讨论Communication between multiple components with a service by using Observable and Subject in Angular 2如何在多个组件中共享值，这些组件没有parent-child或child-parent关系，也没有导入外部库作为ngrx商店。

1
投票

我有同样的问题，大多数组件需要loggedInUser信息。例如：用户名，首选语言，用户的首选时区等。

因此，一旦用户登录，我们可以执行以下操作：

如果所有信息都在JWT令牌或/我RESTful Api中，那么您可以在其中一个服务中解码令牌。

例如：user.service.ts

@Injectable()
export class UserService {

  public username = new BehaviorSubject<string>('');
  public preferredLanguage = new BehaviorSubject<string>('');
  public preferredTimezone = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private jwtTokenService: JwtTokenService
  ) {
    let token: string = localStorage.getItem('token'); // handled for page hard refresh event
    if (token != null) {
      this.decode(token);
    }
  }

  private decode(token: string) {
    let jwt: any = this.jwtTokenService.decodeToken(token);
    this.username.next(jwt['sub']);
    this.preferredLanguage.next(jwt['preferredLanguage']);
    this.preferredTimezone.next(jwt['preferredTimezone']);
  }

  public setToken(token: any) {
    localStorage.setItem('auth_token', token);
    this.decode(token);
  }

}

它拥有三个公共行为主题，无论是谁正在听这个变量，如果它是变化的话都会得到它。请检查rxjs编程风格。

现在，无论何处需要此变量，只需从该组件订阅即可。

例如：NavComponent肯定需要用户名。因此代码将如下所示：

export class NavComponent implements OnInit {

    public username: string;

    constructor(
        private userService: UserService,
        private router: Router) {
    }        

    ngOnInit() {
        this.userService.username.subscribe(data => {
          this.username = data;
        });        
    }
}

因此，reactive programming提供了更好的解决方案来处理依赖变量。

如果页面是硬刷新，上面也解决了这个问题，因为我将值存储在localstorage中并在构造函数中获取它。

请注意：假设登录的用户数据来自JWT令牌，如果数据来自Restful Api，我们也可以使用相同的服务（UserHttpService）。例如：api / me

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.