离子http进入制表符模块
离子http进入制表符模块
提问于 2020-03-01 12:35:44
我想创建一个简单的应用程序，从get请求中获取一些用户数据。我已经学过几个教程了，似乎没有什么对我有用。首先，我创建了这样一个服务，名为profile.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProfileService {
url = 'https://example.com/api/user';
constructor(private http: HttpClient) { }
getProfile(id: string) {
return this.http.get(`${this.url}/${id}`);
}
}另外，在app.module.ts，中，我像这样导入了HttpClientModule，：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}然后，在我的一个名为tab1.module.ts (我使用制表符模块)的选项卡上，执行以下操作：
import { IonicModule } from '@ionic/angular';
import { RouterModule, ActivatedRoute } from '@angular/router';
import { NgModule, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ProfileService } from '../profile.service';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: Tab1Page }])
],
declarations: [Tab1Page]
})
export class Tab1PageModule implements OnInit {
accountData = null;
constructor(private profileService: ProfileService) { }
ngOnInit() {
console.log('test')
this.profileService.getProfile('3')
.subscribe(result => {
console.log('my data:', result)
this.accountData = result
});
}
}最后，我尝试在tab1.page.html中打印结果：
<ion-content>
<ion-list>
<ion-item>
<ion-icon slot="start" color="primary" name="male"></ion-icon>
<ion-label>{{ accountData?.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>什么都没有印出来。注意，即使在我的Tab1PageModule.中不使用实现OnInit，它也不起作用。控制台中也没有打印任何内容。因为我使用制表符模块，有什么问题吗？理想情况下，最后，我希望为每个选项卡调用一个与配置文件服务不同的函数。我用离子5。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-02 10:01:20
我试着复制你的案子，对我来说是成功的。对我来说，你似乎把tab1.module.ts和tab1.page.ts混为一谈。模块只用于导入包和延迟加载整个模块。它的职责与tab1.page.ts不同，后者具有与其.html对应的绑定。我准备了一个为我工作的项目。结帐，特别是profile.service.ts，app.module.ts，tab1.module.ts和tab1.page.ts。
我基本上把代码放到了tab1.page.ts中，去掉了不寻常的地方。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60475168
复制相关文章
相似问题
腾讯云开发者
