angular 服务 .service.ts

首先理解一下angular的服务的本质就是依赖注入 我们写在一个ts文件中 其实service就是一个Injector

@Injectable()
class Product {
  constructor(
    private name: string,
    private model: string,
    private color: string,
    private price: number,
    private type: string
  ) { }
}

export class HomeGrandComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    const injector = Injector.create({
      providers: [
        {
          provide: Product,
          useFactory: () => {
            return new Product('大米手机', 'DM-9', '黑色', 2999, '全网通');
          },
          deps: []
        },
        {
          provide: PurchaseOrder,
          deps: [Product]
        },
        {
          provide: token,
          useValue: { baseUrl: 'http://local.dev' }
        }
      ]
    }); 
    //class方式
    console.log('injector获取product', injector.get(PurchaseOrder).getProduct);
    //injection方式
    console.log(injector.get(token));
  }

首先写@injectable 这里写我们需要注入的东西 比如说product  然后下面构造一个injector 用create方法 里面providers数组中写我们需要构造的东西 比如要构造Product 在 useFactory中就会把上面定义的product注入到这里。我们写上实例 打印一下 就可以看到 Product这个实例了

效果如下：

 理解了服务的底层，再看如何使用就会觉得很简单了 这个providers大家看起来应该都很熟悉。对，这个就是我们构造moule.ts的时候 里面那个providers属性

比如我们有一个homeservice服务

.service.ts中的代码 我们需要@Injectable() 依赖注入

@Injectable()
export class HomeService {

  imageSliders: ImageSlider[] = [
    {
      imgUrl:
        'https://media.istockphoto.com/photos/morning-jogging-picture-id497687118',
      link: '',
      caption: ''
    },]
  getBanners() {
    return this.imageSliders;
  }

}

在你需要使用的模块对应的 .module.ts中

@NgModule({
  declarations: [
    HomeDetailComponent,
  ],
  providers:[HomeService]
  imports: [SharedModule, HomeRoutingModule]
})

在这可以直接写providers就不用找ts文件去构造injector.create方法了。是不是感觉很简单了？

相比单文件的注入，利用angular框架的module实现服务（依赖注入）会更简单