2017-04-26 56 views
0

我有Tour of Heroes应用程序正在运行,但我想将其扩展为创建ajax调用。

我有担任了该数据的WebAPI服务(启用CORS),并证明它瓦特/使用JQuery $。员额和$的getJSON一个愚蠢的小非角客户端...所有进展顺利......

这里是我的英雄details.component.ts文件 (高兴地包括任何其他人可以帮助...)

import {Component , Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location } from '@angular/common'; 
import { HttpModule } from '@angular/http'; 
import 'rxjs/add/operator/switchMap'; 
import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 

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

export class HeroDetailComponent { // implements OnInit { 
    @Input() hero: Hero; 

    powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; 
    submitted = false; 

constructor(
    private heroService: HeroService, 
    private route: ActivatedRoute, 
    private location: Location, 
    $http  //**--LINE OF INTEREST #2** 
) { } 

ngOnInit(): void { 
    this.route.params 
    .switchMap((params: Params) => this.heroService.getHero(+params['id'])) 
} 
save(): void { 
    this.heroService.update(this.hero) 
     .then(() => this.goBack()); 
} 


goBack(): void { 
    this.location.back(); 
} 

onSubmit() { this.submitted = true; } 

callService() {  

    var uri = 'http://localhost:61212/api/heros'; 

    //**// LINE OF INTEREST #1** 
    $http({ 
     method: 'GET', 
     url: uri 
    }).then(function() { alert('success'); }, function() { alert('fail');}); 
}; 

}

如果我尝试编译,我得到

TS2304: Cannot find '$http' 

我可以评论$ HTTP调用(兴趣线#1),它编译,它运行,我输入函数,并打到我声明和分配变量“uri”的断点。所以我有理由相信我的问题是孤立的。

所以我相信,基于谷歌搜索的时间,我需要DI的$ HTTP对象到此组件

但是当我通过$ HTTP到构造函数,我得到(感兴趣的#2号线)以下当我尝试编译时发生错误

TS7006 Parameter '$http' implicitly has an 'any' type 

我已经使用了这么多的Larry和Sergy让我把它关闭。 我发现$ http被传入控制器,也许我错过了一些东西,但我似乎无法将这些文章翻译成适用于此的东西。

1)我是正确的,注入$ HTTP对象是需要做

2)什么是语法是什么?

+1

哪个版本的角度2,你的工作吗?为什么'$ http'而不仅仅是'private http:Http'? – Searching

+0

@ angular/common @〜4.0.0 我对你的问题的回答很简单,因为我试图使用谷歌作为学习工具,它很棒,但有时会把你拖下一个兔子洞......所有的页面似乎有$ http传递给构造函数。让我试着放弃$ – greg

+0

,结果我使用的是Angular 1代码。我没有意识到,直到我尝试了其他的东西。 – greg

回答