Question

我只是在玩耍 ng-book中的http内容

简单部署

/app
    /search
        search.component.ts
        search.service.ts
        search.token.ts
    app.component.ts
    app.module.ts

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';

import { searchDataToken } from './search/search.token';
import { youTubeApiKeyToken} from './search/search.token';

console.log('AppComponent',youTubeApiKeyToken);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(@Inject(searchDataToken) searchDataService) {
    console.log(searchDataService.search());
  }
  ngOnInit() {}
}

search.component.ts

import { Component, OnInit } from '@angular/core';

import { youTubeApiKeyToken} from './search.token';
console.log('SearchComponent',youTubeApiKeyToken);

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

search.token.ts

import { OpaqueToken } from '@angular/core';

import { SearchDataService } from './search.service';

export const searchDataToken  = new OpaqueToken('SearchDataService');
export const youTubeApiKeyToken = new OpaqueToken('youTubeApiKeyToken');
export const youTubeApiUrlToken = new OpaqueToken('youTubeApiUrlToken');
export const YOUTUBE_API_KEY: string = 'AIzaSyDOfT_BO81aEZScosfTYMruJobmpjqNeEk';
export const YOUTUBE_API_URL: string = 'https://www.googleapis.com/youtube/v3/search';

export const searchServiceInjectables: Array<any> = [
  {provide: searchDataToken, useClass: SearchDataService},
  {provide: youTubeApiKeyToken, useValue: YOUTUBE_API_KEY},
  {provide: youTubeApiUrlToken, useValue: YOUTUBE_API_URL}
];

search.service.ts

import {
  Injectable,
  Inject
} from '@angular/core';

import { Http, Response, RequestOptions, Headers } from '@angular/http';
import {Observable} from 'rxjs/Observable';

import { youTubeApiKeyToken} from './search.token';
console.log('Search service',youTubeApiKeyToken);

@Injectable()
export class SearchDataService {
/*  constructor(private http: Http,
    @Inject(youTubeApiKeyToken) private apiKey: string,
    @Inject(youTubeApiUrlToken) private apiUrl: string) {
  }*/
  search(query: string) {
    return 'hey there'
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';



import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';
import { SearchDataService } from './search/search.service';

import { searchServiceInjectables} from './search/search.token';


@NgModule({
  declarations: [
    AppComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [searchServiceInjectables],
  bootstrap: [AppComponent]
})
export class AppModule { }

在Chrome控制台中，我可以看到

Search service undefined
app.component.ts:7AppComponent OpaqueToken {_desc: "youTubeApiKeyToken"}
search.component.ts:4SearchComponent OpaqueToken {_desc: "youTubeApiKeyToken"}
app.component.ts:16 hey there

为什么：

import { youTubeApiKeyToken} from './search.token';
console.log('Search service',youTubeApiKeyToken);

未定义？

完成了工作

原来打字稿是有罪的问题在于从＆＃39; ./ search.service＆＃39;中导入{SearchDataService}; 在search.token.ts中，如果你将令牌放在另一个令牌中文件工作正常看看Can typescript external modules have circular dependencies?

感谢@Fabio Biondi指出了

Answer 1

仅出于测试目的，请尝试在providers: [ { provide: 'youTubeApiUrlToken', useValue: 'yourUrl ' } ]中使用以下代码，而不是使用OpaqueToken。它应该工作。

RSpec.configure

Answer 2

我在你的代码中看到了另一个可能的错误：

在我看来，这段代码（在你的app.module.ts中）：

  providers: [searchServiceInjectables],

应该如下：

  providers: [...searchServiceInjectables],

从服务导入提供undefined

完成了工作

2 个答案: