角5：コンポーネントからサービスへの入力値の保存

Question

コンポーネントからの入力値をユーザー名の入力などのデータサービスに保存しようとしています。実際の入力は、データサービスがインポートされる別のコンポーネントに存在します。

入力からデータをバインドして、データサービスの変数に追加するにはどうすればよいですか？

更新：私はDataServiceと私のコンポーネントの間でデータを翻訳することができました。以下はコードです。

UPDATE v2：私は今、新しいエラー「リ​​クエストヘッダーフィールドContent-Typeは、プリフライトレスポンスでAccess-Control-Allow-Headersで許可されていません。これを解決しようとしています。

UPDATE v3：私はすべてがうまくいくように管理しました。以下の回答を確認してください。

のDataService：

は

import { HttpClient, HttpRequest } from '@angular/common/http'; 

import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataService { 
    username:string = ''; 
    password:string = ''; 

    convioURL:string; 
    loginMethod:string; 

    constructor(private http: HttpClient) {} 

    getData() { 
     this.convioURL = 'https://testurl.com/'; 
     this.loginMethod = '?testMethod&user_name='+ this.username +'&password='+ this.password +'&response_format=json'; 
     const req = new HttpRequest('POST', this.convioURL + this.loginMethod, { 
      reportProgress: true 
     }); 

     return this.http.request(req); 
    } 
    usernameKey(value: string) { 
     this.username + value; 
    } 
    passwordKey(value: string) { 
     this.password + value; 
    } 
} 

コンポーネント：

import { Component, OnInit } from '@angular/core'; 
import { HttpEvent, HttpEventType } from '@angular/common/http'; 
import { DataService } from '../data.service'; 
import * as $ from 'jquery'; 

@Component({ 
    selector: 'app-step-01', 
    templateUrl: './step-01.component.html', 
    styleUrls: ['./step-01.component.scss'] 
}) 
export class Step01Component implements OnInit { 

    data: any; 
    usernameInput: any; 
    passwordInput: any; 
    constructor(private dataService: DataService) { 
    } 

    ngOnInit() { 
    } 

    usernameKey(event: any) { 
     this.dataService.username = event.target.value; 
    } 
    passwordKey(event: any) { 
     this.dataService.password = event.target.value; 
    } 

    private getLoggedIn() { 
     this.dataService.getData().subscribe((event: HttpEvent<any>) => { 
      switch (event.type) { 
       case HttpEventType.Sent: 
        console.log('Request sent!'); 
       break; 
       case HttpEventType.ResponseHeader: 
        console.log('Response header received!'); 
       break; 
       case HttpEventType.DownloadProgress: 
        const kbLoaded = Math.round(event.loaded/1024); 
        console.log(`Download in progress! ${kbLoaded}Kb loaded`); 
       break; 
       case HttpEventType.Response: 
        console.log(' Done!', event.body); 
        this.data = event.body; 
        console.log(this.data); 
      } 
     }); 
    } 

} 

これは完全に正常に動作します私のjQueryのコードですが、私はこのアプリにはjQueryを使用してから離れて滞在しようとしています、私はなりたいですこれをangle5/typescriptの方法で書くことができます。これが、私がやろうとしていることを誰もが理解できるようになることを願います。

$("#ssoForm").submit(function(e) { 
      e.preventDefault(); 
      var username = $('#username').val(); 
      var password = $('#password').val(); 

      var apiURL = 'http://testurl.com/?'; 
      var loginMethod = 'testMethod&user_name='+ username +'&password='+ password +'&response_format=json'; 


      $.post(apiURL + loginMethod, 
       function(data) { 
        if (data) { 
         var json = $.parseJSON(data) 
         console.log(json); 

         var consID = json.loginResponse.cons_id; 

         var ssoUser = 'fakeusername'; 
         var ssoPassword = 'fakepassword'; 

         var ssoMethod = 'fakeSSOMethod&response_format=json&login_name='+ ssoUser +'&login_password='+ ssoPassword + '&cons_id='+ consID; 

         $.post(apiURL + ssoMethod, function(ssoData) { 
          var res = $.parseJSON(ssoData); 
          console.log(res); 
         }); 
        } else { 
         console.log('No Data!'); 
        } 
      }); 
     }); 

コンポーネントテンプレート：

<form id="ssoForm"> 
    <table> 
     <tr> 
      <td>User Name:</td> 
      <td><input id="username" name=user_name type=text size=15 maxlength="100" #box (keyup)="usernameKey($event)"></td> 
     </tr> 
      <tr> 
      <td>Password:</td> 
      <td><input id="password" name=password type=password size=15 maxlength="100" #box2 (keyup)="passwordKey($event)"></td> 
     </tr> 
     <tr> 
      <td>Remember Me:</td> 
      <td><input name=remember_me type=checkbox></td> 
     </tr> 
    </table> 
    <input (click)="getLoggedIn()" type="submit"/> 
</form> 

Answer 1

私はその後、私が使用しているコンポーネントに呼び出されたデータサービスの新機能を設定することにより、私の最新の問題を修正しました。その後、私のコンポーネントテンプレートでクリックでそれに呼ば

logMeIn() { 
    this.convioURL = 'https://www.testurl.com/'; 
    this.loginMethod = '?testMethod&user_name='+ this.username +'&password='+ this.password +'&response_format=json'; 
    this.http.post(this.convioURL + this.loginMethod, null) 
     .subscribe(res => { 
      this.loginRes = res; 
      console.log(this.loginRes); 
     }, (err) => { 
      console.log(err); 
     } 
    ); 
} 

：DataServiceので

は以下を追加しました。

これは私の状況で他の人に役立つことを願っています！