gpt4 book ai didi

Angular5 服务调用不适用于 ngOnInit

转载 作者:搜寻专家 更新时间:2023-10-30 21:49:13 25 4
gpt4 key购买 nike

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

}

最佳答案

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

关于Angular5 服务调用不适用于 ngOnInit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48727535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com