Вызов службы Angular5 не работает на ngOnInit

Когда я перехожу к компоненту результатов, служба внутри ngOnInit работает должным образом. Затем я открываю боковое меню, перехожу на другую страницу, затем снова перехожу на страницу результатов. Но на этот раз страница не отображает результаты. Вместо этого отображается ng-template. Никаких ошибок на консоли, ничего. ngOnInit работает, отображает console.log('init'); Но в сервис не звонят. Если я вставляю вызов службы внутри конструктора или внутри функции, он тоже не работает. Я пробовал с ngZone и без него, ничего.

Я должен упомянуть, что если я нажму F5 прямо на странице результатов, это сработает. Просто, когда я перехожу к нему через this.router.navigate(['/resultados']);, это не работает.

Это компонент результатов:

import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { NavService } from '../shared/nav.service';
import {AngularFirestore} from 'angularfire2/firestore';
import {firestoreService} from '../shared/firestore.service';
import {Usuario} from '../../models/usuario'

@Component({
    selector: 'resultados',
    templateUrl: 'resultados.component.html'
})

export class ResultadosComponent implements OnInit {
    servId:any;
    users: Usuario[];
    constructor(
        private fService: firestoreService,
        private service:NavService,
        private router: Router,
        private zone: NgZone
      ) { }

    ngOnInit() { 
        console.log('init')
        this.fService.getUsers().subscribe(users=>{
            this.zone.run(()=>{
                this.users = users;
            })

        })
    }
}

Это результаты HTML:

<div class="resultados" *ngIf="users?.length > 0;else noUsers"> 
<ul *ngFor="let user of users">
    <li>{{user.uid}}</li>
</ul>
</div>
<ng-template #noUsers>
<hr>
<h5>Nenhum usuário cadastrado</h5>
</ng-template>

Это firestore.service:

    import { Injectable } from '@angular/core';
    import {AngularFirestore, AngularFirestoreCollection, 
    AngularFirestoreDocument} from 'angularfire2/firestore';
    import {Usuario} from '../../models/usuario'
    import {Observable} from 'rxjs/Observable';


@Injectable()
export class firestoreService {
    usersCollection: AngularFirestoreCollection<Usuario>;
    users:Observable<Usuario[]>;

     constructor(public afs:AngularFirestore){

         this.users = this.afs.collection('users').valueChanges();

     }

    getUsers(){
        return this.users;
    }

}

typescript angular ngoninit
person Rafael Natal    schedule 11.02.2018    source источник
comment
Извините, но что, черт возьми, вы делаете в этом конструкторе? Удалите все эти this.router = router методы, они не нужны.   -  person Roddy of the Frozen Peas    schedule 11.02.2018
comment
Также вы можете прочитать об хуках жизненного цикла angular и о том, когда каждый из них происходит. OnInit вызывается только один раз после первого события onChanges.   -  person Roddy of the Frozen Peas    schedule 11.02.2018
comment
Извините, потому что страница не готова .. сейчас удалена .. Хорошо, но проблема не в том, что ngOnInit работает. Сервисный вызов внутри этого не делает.   -  person Rafael Natal    schedule 11.02.2018
comment
Пожалуйста, покажите код firestoreService   -  person dev_in_progress    schedule 11.02.2018
comment
Я думаю, что у меня было это однажды, и в итоге я решил это, изменив RouteReuseStrategy, хотя я не уверен, что это был правильный подход ... я предполагаю, что если бы вы отменили подписку на этот OnDestroy, это сработало бы правильно   -  person tam5    schedule 11.02.2018
comment
@tam5 большое спасибо. Отписаться OnDestroy работал как шарм!   -  person Rafael Natal    schedule 11.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Использование отписки внутри OnDestroy сработало! Спасибо @tam5.

import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { NavService } from '../shared/nav.service';
import {AngularFirestore} from 'angularfire2/firestore';
import {firestoreService} from '../shared/firestore.service';
import {Usuario} from '../../models/usuario'
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { Subscription } from 'rxjs/Subscription'; //<== added this

@Component({
    selector: 'resultados',
    templateUrl: 'resultados.component.html'
})

export class ResultadosComponent implements OnInit , OnDestroy {
    servId:any;
    users: Usuario[];
    private subscription: Subscription = new Subscription(); //<== added this

    constructor(
        private fService: firestoreService,
        private service:NavService,
        private router: Router,
        private zone: NgZone
      ) {


      }

    ngOnInit() { 
        console.log('init')
    this.subscription.add(this.fService.getUsers().subscribe(users=>{ //<== added this

            this.zone.run(()=>{
                this.users = users;
            })

        }))
    }

    ngOnDestroy(){ //<== added this
        this.subscription.unsubscribe();
    }
}
person Rafael Natal    schedule 11.02.2018