angular - 从服务导入未定义

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);

未定义？

解决了

事实证明 typescript 是有罪的问题是从'./search.service'导入{SearchDataService}；在 search.token.ts 中，如果您将 token 分离到另一个归档它工作正常看看Can typescript external modules have circular dependencies?

感谢@Fabio Biondi 指出这一点

Answer 1

仅用于测试目的，请尝试在 app.module.ts 中使用以下代码，而不是您的 OpaqueToken。它应该有效。


供应商:[
{
提供:'youtubeApiUrlToken'，
使用值(value):“你的网址”
}
]