在 Angular6 服务未加载答案

【问题标题】：in Angular6 service is not loading在 Angular6 服务未加载
【发布时间】：2019-02-16 13:08:13
【问题描述】：

我刚开始学习 Angular，在我将 service(dish.service.ts) 添加到我的项目之前，一切都很顺利。

这是错误 ./src/app/services/dish.service.ts 模块解析失败：意外令牌 (15:13) 您可能需要适当的加载程序来处理此文件类型。

dish.service.ts

import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { Dishes } from '../shared/dishes';

@Injectable({
  providedIn: 'root'
})
export class DishService {

  constructor() { 
    getDishes():Dish[]{
        return DISHES;
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platformbrowser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatListModule } from '@angular/material/list';

import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import 'hammerjs';
import { MenuComponent } from './menu/menu.component';
import { DishDetailsComponent } from './dish-details/dish-details.component';
import { DishService } from './services/dish.service';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    DishDetailsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
   MatButtonModule,
    FlexLayoutModule
  ],
  providers: [ DishService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

为什么你在 providers [] 中有 discService 你已经在根级别声明了它，所以你不需要在你的模块文件中声明

标签： angular

【解决方案1】：

首先无需在app.module.ts -> providers:[] 中注册服务，因为您使用的是angular 6，它现在具有providedIn: 'root' 之类的功能。

第二次你在构造函数的getDishes()中添加了你的函数，所以从那里删除并在构造函数之后添加它，

@Injectable({
   providedIn: 'root'
})
export class DishService {

   constructor() {}

   getDishes(): Dish[]{
     return DISHES;
   }
}

【讨论】：

【解决方案2】：

不过，您可以通过多种方式使用您的服务，具体取决于您的要求你想怎么处理

把服务放到app.module.ts

通过将服务添加到 providers 数组中，这意味着在您的应用程序中您想要维护该服务的单个实例，并且您想要将一个服务注入到另一个服务中

例如：

//import the service
providers: [yourseriviceName]
//this would create a single instance also don't added
@Injectable({providedIn: 'root'})  
// as it is not need .

如果您只想在您的组件中导入并想要多个服务实例

service.ts:

export class dummyService {
    constructor(parameters) {
        
    }

    yourMethod(){
        return //Something
    }
}

组件.ts

同时导入您的服务

@Component({
    selector: 'dummy',
    styleUrls: ['dummy.component.sass'],
    templateUrl: 'dummy.component.html',
    providers:[dummyService]
})

export class yourComponentName {
    constructor(private dummyservice:dummyService) {
    }

    //Acces your service via
    this.dummyservice.yourMethod()
}

当您想将一项服务注入另一项服务时：

//import injectable from angular core
//import your service which you want to inject

//Note ensure you import injectable first and then your service
@injectable()
export class dummyService {
    constructor(parameters) {

    }

    yourMethod(){
        return //Something
    }
}

来到你的问题是你的方法有问题，它在构造函数中，当你在打字稿中创建一个类时，给你一个更好的概述，首先执行构造函数，然后是其他角度生命周期钩子所以请参考我的第二点并将您的方法保留在构造函数之外并按照我在component.ts 中显示的那样访问它。

【讨论】：