Angular Service可观察到的不是触发组件第二次订阅

Question

我正在尝试订阅以服务为主题的组件，以确保在Service Emittion上运行组件订阅。

问题是订阅命中仅在此之后首次订阅未达到可观察的回报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

您正在应用 Antipattern ：切勿在同一服务中订阅服务调用。您必须返回呼叫，组件必须订阅此可观察的可观察。

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

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

因为一个主题是观察者，

Answer 2

您的代码未完成(例如，没有getAllStores()或storeListEvent()方法，尚不清楚userService是什么(，因此我要说的是在您的情况下可能不正确。<<<<<<<</p>

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

1. 从店服务中删除主题
2. 使loadStores()方法返回可观察的
3. 在HeaderNavComponent中订阅可观察到的可观察到的 loadStores()
4. 将订阅逻辑放在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();
            });
        }
}

附加注释

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

查看您的代码getAllStores()返回可观察的可观察，否则您将无法subscribe

如果这是正确的，而不是订阅getAllStores()返回的可观察值只是为了发出一个新值，则可以使用另一个可观察的(storesList(订阅，您可以简单地将HeaderNavComponent订阅 CC_17订阅getAllStores()方法

的可观察到的可观察到的可观察到的订阅

我希望现在更清楚

Answer 3

我在这里要做的第一个是将this.storeList.next(m);调用，而不是在其他订阅中，而是直接从您的功能中调用。如果有效，那么您知道问题与其他订阅有关，而不是storesList。