Question

这段代码可以在Angular2 2.0.0.rc.2上运行，但现在它不起作用了错误。导入FORM_DIRECTIVES，HTTP_PROVIDERS，bootstrap

如何将其修复为Angular2 v2.0.1

import { Component, OnInit } from "@angular/core";
import { Http, Response, URLSearchParams} from "@angular/http";
import { FORM_DIRECTIVES } from "@angular/common"    //error

无法在Angular v2.0.1中导入FORM_DIRECTIVES

import {Observable} from 'rxjs/Observable';
import { IFood} from "./food";
import { Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";

@Component({

selector: "my-app",
directives: [FORM_DIRECTIVES],   //error
templateUrl: "./app/form.html"
})

export class AppComponent implements OnInit {
public values: string[];
public headers: Headers;
errorMessage: string;
foods: IFood[];
foodModel = <IFood>{}; 

constructor(private http: Http) {
    this.http = http;
    this.headers = new Headers();
    this.headers.append("Content-Type", "application/json");
}

ngOnInit() {
    return this.http.get("/home/getdata")
        .map((response: Response) => <IFood[]>response.json())
        .subscribe(data => this.foods = data, error => this.errorMessage = <any>error);
}
onSubmit(form): void {
    let headers = new Headers({ "Content-Type": "application/json" }); 
    let options = new RequestOptions({ headers: headers });
    console.log(this.foodModel);
    console.log(JSON.stringify(this.foodModel));

    this.http.post("/home/postform", JSON.stringify(this.foodModel), options)
        .map((response: Response) => <IFood>response.json())
        .subscribe(json => { alert(this.foodModel.foodId +"  "+ this.foodModel.foodName); /* handle it */ });
}

并在main.ts

import { AppComponent } from './app.component';
import { bootstrap }    from '@angular/platform-browser-dynamic';

无法导入bootsrap

import {HTTP_PROVIDERS} from '@angular/http';   //error http_providers

无法导入HTTP_PROVIDERS bootstrap（AppComponent，[HTTP_PROVIDERS]）; //错误引导程序

如何将其修复为Angular2 v2.0.1

Answer 1

您需要创建NgModule s 有关详细信息，请参阅https://angular.io/docs/ts/latest/guide/ngmodule.html

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

并更改引导代码

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

如何从angular2 final（2.0.1）传递简单数据（json）

1 个答案: