ionic http 进入选项卡模块

Question

我想创建一个简单的应用程序来从获取请求中获取一些用户数据。我遵循了几个教程，但似乎对我没有任何帮助。首先，我创建了一个这样的服务，叫做 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 中使用 implements OnInit，它也不起作用。控制台中也没有打印任何内容。是不是因为我用了tabs模块有什么问题？理想情况下，最后，我希望为每个选项卡调用与配置文件服务不同的功能。我用 Ionic 5.

Answer 1

我试图重现你的案例，对我来说它成功了。对我来说，您似乎混淆了 tab1.module.ts 和 tab1.page.ts 。该模块仅用于导入您的包并延迟加载您的整个模块。它与 tab1.page.ts 具有不同的职责，后者绑定到它的 .html 对应项。我准备了一个对我有用的项目。尤其是 profile.service.ts、app.module.ts、tab1.module.ts 和 tab1.page.ts.

The Stackblitz project

我基本上是把代码放到tab1.page.ts里，去掉不必要的。

ionic http 进入选项卡模块

ionic http get inside tabs module

ionic-framework

angular

ionic4