Question

我在我的角度应用程序中有一些服务来存储用户的状态：

    this.auth.activeUser.subscribe((status) => {
        console.log("subscribe >>>", status);
        this.isAuth = status;
    });

我这样做：

转到组件A，并在我已订阅此主题的构造函数中（auth是已导入的服务）：

this.auth.activeUser.next(true);

在这个组件的另一种方法中，我这样做：

activeUser

如果用户成功登录，如果遇到麻烦则设置为false。

Greate，它有效，我有控制台输出。

但我有另一个组件，必须使用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 is foo HomeComponent时，我必须在控制台中看到this.auth.activeUser.subscribe，但它不是真的。

我找到了这个答案 Subscribe method don't react to changes [Angular 2]

根据它，我做了以下几点：

转到app.module.ts
导入的服务
向服务提供商[]

auth

其中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); } }是注入服务。我甚至重新启动了webpack，但无论如何都失败了。谢谢你的帮助。

完整的第二个组件是：

 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 { }

我的app.module.ts

@Injectable()
export class AuthService {


    public activeUser = new BehaviorSubject(null);

    constructor(private http: Http, private interaction:InteractionService) {

    }
}

我的服务：

bootstrap typeahead

Answer 1

我认为你需要的是一个ReplaySubject。这将重播新消费者订阅时流上的最后一个事件。创建一个这样的：

   // 1 is the amount of events to replay when subscribed
   new ReplaySubject<boolean>(1);

您可以像使用BehaviourSubject

一样使用它

Angular 2：如何在几个组件之间共享一个服务？

1 个答案: