Question

嗨，我是角色2的新人。我已经准备好了解决方案。 index.html上有三个文件，hello_world.html，hello_world.ts下面给出了三个文件的代码。我想从角度2发布数据。请帮助我如何使用角度2发布数据

Index.html

<!DOCTYPE html> 
<html>
<head> 
<title>Angular 2 QuickStart</title>
<script 
src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>

<script src="https://code.angularjs.org/tools/typescript.js"></script>

<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-
polyfills.js"></script>

<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'src': {defaultExtension: 'ts'}} 
  });
</script>

<!-- 3. Bootstrap -->
<script>
  System.import('angular2/platform/browser').then(function(ng){
    System.import('src/hello_world').then(function(src) {
      ng.bootstrap(src.HelloWorld);
      });
  });
</script>

 </head>

  <!-- 4. Display the application -->
  <body>
  <hello-world>Loading...</hello-world>
  <!--    <click-me > Click</click-me>-->
  </body>
  </html>

hello_world.html

  <div class="container">
  <h2>Registration form</h2>
  <form class="form-horizontal">
  <div class="form-group">
  <label class="control-label col-sm-2" for="email">First Name:</label>
  <div class="col-sm-10">
    <input type="text" [(ngModel)]="yourFName" class="form-control"   placeholder="Enter firstname">
  </div>
</div>
   <div class="form-group">
  <label class="control-label col-sm-2" for="email">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" [(ngModel)]="yourLName"  class="form-control"  placeholder="Enter lastname">
  </div>
</div>
     <div class="form-group">
  <label class="control-label col-sm-2" for="email">Email:</label>
  <div class="col-sm-10">
    <input type="email" [(ngModel)]="yourEmail"  class="form-control"   placeholder="Enter email">
  </div>
</div>    
<div class="form-group">
  <label class="control-label col-sm-2" for="pwd">Password:</label>
  <div class="col-sm-10">
    <input type="password"  [(ngModel)]="yourpwd" class="form-control" id="pwd" placeholder="Enter password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>

          <input type="checkbox"  [ngModel]="rememberMe" (ngModelChange)="addProp($event)"> Remember me</label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">

    <button type="submit" (click)="onClickMe($event)" class="btn btn-default">Submit</button>
  </div>
  </div>
   </form>
   </div>

hello_world.ts

    import {Component} from 'angular2/core';
    import { Http, Response } from '@angular/http'; 
    @Component({  
    selector: 'hello-world',
    templateUrl: 'src/hello_world.html'    
    })

    export class HelloWorld { 
    yourFName: string = '';
    yourLName: string = '';
    yourEmail: string = '';
    yourpwd: string = '';
    rememberMe: string='';
    clickMessage = '';  
    public users = [
    { name: 'Jilles',Salary:57000, age: 30 },
    { name: 'Todd',Salary:65000, age: 30 },
    { name: 'Lisa',Salary:91000,age: 36}
    ];
     onClickMe($event) {    
    alert('Click is working') 
    }
    }

Answer 1

使用observables创建一个服务来进行http调用....

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Hero }           from './hero';
import { Observable }     from 'rxjs/Observable';

@Injectable()
export class HeroService {
    private heroesUrl = 'app/heroes';  // URL to web API

    constructor (private http: Http) {}

     addHero (name: string): Observable<Hero> {

        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.heroesUrl, { name }, options)
                .map(this.extractData)
                .catch(this.handleError);
        }

      private extractData(res: Response) {
        ...code here for good response...
      }

      private handleError (error: Response | any) {
          ...code here for bad response...
      }
}

然后将服务添加到您的组件并调用addHero函数发布（添加）新的英雄。确保在服务文件之上导入服务。

constructor (private heroService: HeroService) {}

addHero (name: string) {
      if (!name) { return; }

      this.heroService.addHero(name)
               .subscribe(
                 hero  => this.heroes.push(hero),
                 error =>  this.errorMessage = <any>error);
      }

}

您可以在此处了解详情：https://angular.io/docs/ts/latest/guide/server-communication.html

如何使用角度2发布服务？

1 个答案: