ionic入门之服务开发模式

最新推荐文章于 2020-06-12 07:34:10 发布

flybirding10011

最新推荐文章于 2020-06-12 07:34:10 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/685152

本文介绍在Ionic应用开发中如何通过创建服务来避免代码重复，提高代码复用率。详细展示了如何定义数据模型、服务类以及如何在组件中调用服务获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章在 ionic入门之多组件开发模式基础上修改，创建服务用于多个view中调用，避免写重复的代码。

目录结构

新增加了 mock-heroes.ts hero.service.ts

mock-heroes.ts，用来储存数据的
hero.service.ts，用来支持服务

mock-heroes.ts

import { Hero } from  './hero';

export const HEROES : Hero[] = [
  { id : 101, name : '张三'},
  { id : 102, name : '李四'},
  { id : 103, name : '王五'},
  { id : 104, name : '赵六'},
  { id : 105, name : '陈七'},
  { id : 106, name : '吴八'}
];

hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from  './mock-heroes';

// 注意，导入了 Angular 的Injectable函数，并作为@Injectable()装饰器使用这个函数。
@Injectable()
export class HeroService{

  getHeroes() : Promise<Hero[]>{
    return Promise.resolve(HEROES);
  }
  getHeroesSlowly(): Promise<Hero[]> {
    return new Promise(resolve => {
      // 等待20秒之后在去调用方法
      setTimeout(() => resolve(this.getHeroes()), 2000);
    });
  }
}

hero.component.ts

import {Component, OnInit} from '@angular/core';
import { Hero } from './hero';
import { HeroService } from  './hero.service';

@Component({
  selector : 'my-app',
  templateUrl : './hero.component.html',
  providers : [ HeroService ]
})
//实现OnInit 并使用ngOnInit方法，在HeroComponent初始化后调用方法
export class HeroComponent implements OnInit{
  title = '人物列表';
  heroes : Hero[];
  selectedHero : Hero;
  constructor(private heroService : HeroService){

  }
  getHeroes() : void {
    // this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
  }

  ngOnInit() : void {
    this.getHeroes();
  }

  onSelect(hero : Hero) : void {
    this.selectedHero = hero;
  }
}