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

Question

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

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

结构: - 应用程序 - app.ts(主要) - setting.ts - someOtherComponent.ts

Answer 1

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

这是一个例子(/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();
    }
}

您可能还需要添加到服务,以便它的值保存到某个地方(半)永久性的,以便它可以在用户输入的应用程序下一次访问.

Answer 2

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

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

来源:ngrx/storeGitHub回购

下面的代码应概述您将所有步骤集成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().