2017-04-26 15 views
0

私はTour of Heroesアプリを実行していますが、私はajax呼び出しを行うためにそれを拡張したいと思います。

私はデータを提供WebAPIのサービスを持っている(CORS有効)とすべてがうまくいった...他愛ない非アンギュラjQueryの$ .postを使用して、クライアントと$ GetJson/wがそれを証明している...

私は

を取得コンパイルしようとした場合 ここ

は(役立つかもしれない他のものが含まれて幸せ...)私のヒーロー-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オブジェクトを必要とすることを、グーグルの時間に基づいて、信じている。しかし、私は、コンストラクタ(INTEREST#2のLINE)に$ HTTPを渡すとき、私は次の取得私は

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

をコンパイルしようとするとエラー私はこれほどラリーとSergyはそれをオフにノックに頼まれているGoogleで検索しています。 私が見つけたのは、$ httpがコントローラに渡されている、何か不足しているかもしれませんが、私はこれらの記事を翻訳することができません。

1)$のHTTPオブジェクトを注入する

2を何をすべきかである右のことをI)構文は何ですかな?

+1

のですか?なぜ、 'プライベートhttp:Http'だけでなく' $ http'を使うのでしょうか? – Searching

+0

@ angular/common @〜4.0.0 あなたの質問への私の答えは、私がラーニングツールとしてGoogleを使用しようとしていることによるのですが、その素晴らしい、しかしときにはウサギの穴をあなたに送ります...私が引っ張ったすべてのページ$ httpがコンストラクタに渡されているようです。私が$ – greg

+0

を落とそうとすると、私が使用していた例は角度1のコードでした。私は他のことを試してみるまでそれを理解していませんでした。 – greg

答えて

0

私がグーグルをしていたとき、私はちょうどグーグルグーグルであり、ほとんどの記事はangular1のものでした。それでコントローラーなどの答えを見ていたのですが

angular2とは大きく異なります。地面から降りようとしている場合は、代わりにangular2を検索してみてください。少なくともあなたが横断する記事は関連性があります。

Visual Studioを使用している場合...ここにあなたが始めるために素敵なリンクは、あなたが作業している角度の2のどのバージョン...

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

関連する問題