9.1 - 创建服务

创建服务

ng g s service/hero

import { Injectable } from '@angular/core';
@Injectable({
    providedIn: 'root'
})
export class HeroService {
    constructor() { }
    // 自定义方法
    getHero() {
        return 'HeroService'
    }
}

依赖注入并使用

// src/app/app.component.ts
import { HeroService } from './service/hero.service';
export class AppComponent {
    // 如果想要在组件中使用 heroService private 需要替换为 public
    constructor(private heroService: HeroService) {
        console.log(this.heroService.getHero())
    }
}

• 为了清晰和可维护性，建议你在单独的文件中定义组件和服务
• 如果你确实要将组件和服务合并在同一个文件中，则必须先定义服务，再定义组件，这一点很重要。如果在服务之前定义组件，Angular 将返回运行时的空引用错误