Javascript Angular4 服务方法无法识别

Question

我使用 angular4 创建了一个简单的服务

代码如下:

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MyserviceService } from './myservice.service';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [MyserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

//the service
import { Injectable } from '@angular/core';

@Injectable()

export class MyserviceService {

  constructor() { }

  cars = ['fiat', 'form'];

  myData() {
    return 'Hello from service!';
  }

}

//app.component.ts
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'app';

  constructor(private myservice: MyserviceService) {}

  ngOnInit() {
    console.log(this.myservice.cars);

    this.something = this.myData();
  }

}

我这里有两个问题:

1. 没有控制台消息
2. 无法识别 myData“app.component 中不存在 myData”

我在这里做错了什么？

Answer 1

您正在访问 app.component 上的 myData() 方法，它不是应用程序组件的成员。您必须使用 myservice 访问 myData()，如下所示

ngOnInit() {
  console.log(this.myservice.cars);

  this.something = this.myservice.myData();

}

其他一切对我来说都很好。