Question

我正在尝试将组件订阅到Service Subject以确保组件订阅在服务发射上运行。

问题是订阅命中率第一次之后，订阅还没有达到第二次附加的可观察返回0订阅。

以下是代码：

export class StoreService {
    private storesList : Subject<Array<KeyValue<string>>> = null;

    constructor(private http: Http, private _uService: UserService) {
        this.storesList = new Subject<Array<KeyValue<string>>>();
     }
    loadStores(): void{
        this.getAllStores().subscribe(m=>{
            debugger;
            this.storesList.next(m);
        });
    }
    storeListEvent(): Observable<Array<KeyValue<string>>>{
    return this.storesList.asObservable();
    } 
}

虽然组件是。

export class HeaderNavComponent implements OnInit, AfterViewInit,OnDestroy  {

    private storeUpdateSubscription = null;    
    constructor(private _userService: UserService, private cdRef: ChangeDetectorRef, private _storeService: StoreService, private router: Router, private location: Location) {

        this.storeUpdateSubscription = this._storeService.storeListEvent().subscribe(stores => {
            debugger;
            this.appStore = stores;
            this.verifySuperAdmin();
        });
    }

目标是每次都在组件中调用上述订阅

当存储服务 - loadStores被调用时

Answer 1

您正在应用反模式：永远不会在同一服务中订阅服务调用。您必须返回调用，组件必须订阅此Observable。

无论如何，由于storeList是一个主题，你可以简化这样做：

this.getAllStores().subscribe(this.storesList);

因为主体是观察者也是

Answer 2

您的代码不完整（例如，没有getAllStores()或storeListEvent()方法，不清楚userService做了什么）所以我要说的可能不正确你的情况。

无论如何，我建议你做的是简化你的逻辑

从StoreService中删除主题
make loadStores()方法返回Observable
在HeaderNavComponent中订阅返回的Observable loadStores()
将订阅逻辑放在ngOnInit()方法中而不是在构造函数中

这就是代码的样子

    export class StoreService {

        constructor(private http: Http, private _uService: UserService) {
         }
        loadStores(): Observable<Array<KeyValue<string>>> {
               return this.getAllStores();
        }
    }



    export class HeaderNavComponent implements OnInit, AfterViewInit,OnDestroy  {

        private storeUpdateSubscription = null;    
        constructor(private _userService: UserService, private cdRef: ChangeDetectorRef, private _storeService: StoreService, private router: Router, private location: Location) {}


      ngOnInit() {
            this.storeUpdateSubscription = this._storeService.subscribe(stores => {
                debugger;
                this.appStore = stores;
                this.verifySuperAdmin();
            });
        }
}

其他评论

我假设getAllStores()的方法StoreService通过您在构造函数中定义的Http服务执行http调用

查看代码getAllStores()会返回一个Observable，否则您将无法subscribe

如果这是正确的，而不是订阅getAllStores()返回的Observable只是为了用storesList订阅的另一个Observable（HeaderNavComponent）发出一个新值，你可以简单地HeaderNavComponent 1}}订阅getAllStores()方法

我希望现在更清楚

Answer 3

我在这里做的第一件事是将storesList调用到另一个订阅内，但直接从你的函数调用。如果可以，那么您知道问题出在其他订阅上，而不是<%if (projects[i].status == "Created") {%> <td> <form method="get" action="/updateEngineer/<%=projects[i]._id%>"> <select name="eng"> <% for(var k = 0; k < engineers.length; k++){%> <option value="teeeest"> <%=engineers[k].local.email%></option> <%}%> </select> </br><a type="submit"href="/updateEngineer/<%=projects[i]._id%>"class="btn btn-success">Update Engineer</a> </form> </td> <%}%>。

Angular Service Observable第二次不会触发组件订阅

3 个答案: