Angular5服务调用在ngOnInit上不起作用

Posted 2023-03-13

【中文标题】Angular5服务调用在ngOnInit上不起作用

【英文标题】：Angular5 Service call not working on ngOnInit

【发布时间】：2018-07-21 12:07:16

【问题描述】：

当我导航到结果组件时，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;
    

【问题讨论】：

抱歉，您在世界中在那个构造函数中做什么？删除所有那些this.router = router 方法，它们是不必要的。

此外，您可能还想了解angular lifecycle hooks 以及这些情况何时发生。 OnInit 仅在第一个 onChanges 事件之后调用一次。

对不起，因为页面还没有准备好.. 现在删除.. 好的，但问题不在于它正在工作的 ngOnInit。它里面的服务调用没有。

请出示firestore服务代码

我想我曾经遇到过这个问题并最终通过更改 RouteReuseStrategy 来解决它，尽管我不确定这是否是正确的方法......我的猜测是如果你要取消订阅这个 OnDestroy ，它会正常工作

【参考方案1】：

在 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();