将$ http注入Tour of Heroes Component

时间:2017-04-26 22:00:56

标签: javascript angularjs xmlhttprequest

我正在运行Tour of Heroes应用程序,但我想扩展它以进行ajax调用。

我有一个提供数据的WebAPI服务(启用了CORS)并且使用JQuery $ .post和$ GetJson证明了它是一个非常小的非Angular客户端......一切都很顺利......

这是我的hero-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"。所以我有理由相信我已经把问题隔离了。

所以我相信,根据谷歌搜索的时间,我需要将$ http对象转换为此组件

但是当我将$ http传递给构造函数(LINE OF INTEREST#2)时,我尝试编译时出现以下错误

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

我已经用Google搜索了这么多拉里和塞尔吉要我把它打掉。 我发现$ http被传递给控制器​​,也许我错过了什么,但我似乎无法将这些文章翻译成适用于此的文章。

1)我是否正确注入$ http对象是需要做的事

2)语法是什么?

1 个答案:

答案 0 :(得分:0)

当我在谷歌上搜索时,我只是谷歌搜索角度,大多数文章是针对angular1。这就是为什么我看到涉及控制器等的答案

angular2非常不同。如果您想要起步,请尝试搜索angular2。至少你遇到的文章是相关的。

如果您正在使用visual studio ..这是一个很好的链接,可以帮助您入门...

https://jonhilton.net/2016/12/01/fast-track-your-angular-2-and-net-core-web-app-development/