角度2:如何在多个组件之间共享一项服务? [英] Angular 2: how to share one service among several components?
问题描述
我的角度应用程序中有一些服务可以像这样存储用户状态:
I have some service in my angular application like this to store the status of user:
public activeUser = new BehaviorSubject(null);
我执行以下操作:
转到组件A,并在构造函数中我已订阅了此Subject(auth是service,已导入):
Go to the component A and in constructor I have subscribed on this Subject (auth is service, which has been imported):
this.auth.activeUser.subscribe((status) => {
console.log("subscribe >>>", status);
this.isAuth = status;
});
在此组件的另一种方法中,我这样做:
In another method of this components I do this:
this.auth.activeUser.next(true);
如果用户成功登录,则在遇到一些麻烦时设置为false.
if user login successfully, and set false if some troubles.
太好了,它可以正常工作,我有控制台输出.
Greate, it works, I have got console output.
但是我还有另一个组件,该组件必须使用 activeUser
状态.在此组件中,我导入了服务,然后执行以下操作:
But I have another component, which must use activeUser
status. In this component I imported service and do the follow:
ngOnInit() {
this.auth.activeUser.subscribe(
(userStatus:boolean) => {
this.isAuth = userStatus;
console.log("this is foo HomeComponent", this.isAuth);
}
);
console.log("home activeUser", this.auth.activeUser);
}
我认为,当在第一个组件中 Subject
获得 next(true)
或 next(false)
时,我必须看到 this在控制台中是foo HomeComponent
,但这不是真的.
I consider that when in first component Subject
gets next(true)
or next(false)
I have to see this is foo HomeComponent
in console, but it's not true.
我找到了这个答案 Subscribe方法不会对更改做出反应[Angular 2]
根据它,我已经完成了以下操作:
and according to it I have done the follow:
- 转到app.module.ts
- 导入的服务
- 向服务提供商添加服务[]
嗯,我希望我的问题能得到解决.但不是.我返回了第二个组件,并删除了带服务的导入.但是现在我无法编译代码:
Hmmm, I hoped that my problem will be soled. But no. I returned to my second component and removed the import with service. But now I can't compile the code:
this.auth.activeUser.subscribe
其中 auth
是注入服务.我什至已经重新启动了webpack,但是无论如何还是失败了.谢谢您的帮助.
where auth
is injected service.
I have even restarted webpack, but anyway fails.
Thanks you for help.
第二个组件在那里:
import {Component, OnInit} from '@angular/core';
import {AuthService} from "../../platform/auth.service";
import {Observable} from "rxjs";
@Component({
selector: 'home-page',
templateUrl: 'home.component.html',
styleUrls:['home.component.scss']
})
export class HomeComponent implements OnInit {
public isAuth: boolean;
constructor(private auth: AuthService) {
this.isAuth = true;
}
ngOnInit() {
this.auth.activeUser.subscribe(
(userStatus:boolean) => {
this.isAuth = userStatus;
console.log("this is foo HomeComponent", this.isAuth);
}
);
console.log("home activeUser", this.auth.activeUser);
}
}
我的app.module.ts
My app.module.ts
import {AuthService} from "./platform/auth.service";
@NgModule({
imports: [
BrowserModule,
// CommonModule,
ReactiveFormsModule,
routing,
ModalModule,
NgbModule,
HttpModule
],
declarations: [
AppComponent,
HomeComponent
],
providers: [
appRoutingProviders, AuthService
],
bootstrap: [ AppComponent]
})
export class AppModule { }
我的服务:
@Injectable()
export class AuthService {
public activeUser = new BehaviorSubject(null);
constructor(private http: Http, private interaction:InteractionService) {
}
}
推荐答案
我认为您需要的是ReplaySubject.这将重播新订阅者订阅时流中的最后一个事件.创建这样的一个:
I think what you need is a ReplaySubject. This will replay the last event that was on the stream when a new consumer subscribes. Create one like this:
// 1 is the amount of events to replay when subscribed
new ReplaySubject<boolean>(1);
您可以使用与 BehaviourSubject
这篇关于角度2:如何在多个组件之间共享一项服务?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!