コンポーネントとサービスをどのように分けることができますか？

Question

私は現在、私のアプリで記事に関するレビューとコメントを投稿できる機能を持っています。 URLSearchParams（私はこれが私の主な問題であると私は主張しません）に基づいてこの機能を解消したいのです。 基本的に私のURL +私の.mapをサービスに入れたい、残りをコンポーネントに入れたいです。

submitReview(form) { 
    let url = `http://mydomain/wp-json/wp/v2/users-reviews/reviews`; 
    let params = new URLSearchParams; 
    params.append('id', this.postId.toString()); 
    params.append('user_id', this.wp.getCurrentAuthorId().toString()); 
    params.append('name', 'Name'); 
    params.append('email', 'email@example.net'); 
    params.append('title', this.review.rating_title); 
    params.append('description', this.review.rating_comment); 
    params.append('rating', this.review.rating_score); 
    console.log('sending request'); 
    return this.authHttp.post(url, params) 
     .map(
      res => { 
       let newReview = res.json(); 
       this.reviews.push(newReview); 
       console.log(this.reviews); 
       return newReview; 
      } 
     ) 
     .subscribe(
       data => { 
        this.statusMessage = "Review added successfully!"; 
        //clear form 
        form.reset(); 
       }, 
       error => { 
        console.log(error._body); 
        this.statusMessage = error._body; 
       } 
     ); 
} 

誰かがアイデアや文書を持っているので、私が手に入れることができますか？ ありがとうございました:)

Answer 1

あなたはすべて持っているように見えますあなたのコードはコンポーネントの現時点では、あなたはnサービスを作成するee。正しい形式のフォームをお持ちの場合は、例えばthis.postIdを使用する代わりに、リクエストに必要な値をすべて抽出することができます。form.postIdを使用してください。

// necessary imports 

@Injectable() 
export class MyService { 

    constructor(private http: Http) { } 

    // add the correct parameters here 
    submitData(form) { 
    // append your parameters and make request: 
    return this.http.post(url, params) 
     .map(res => res.json()) 
    } 
} 

そして、コンポーネント内のサブスクリプションを行う ...

reviews: any[] = []; 

constructor(private myService: MyService) { } 

submitReview(form) { 
    this.myService.submitData(form) 
    .subscribe(newReview => { 
     this.reviews.push(newReview); 
     this.statusMessage = "Review added successfully!"; 
     //clear form 
     form.reset(); 
    }); 
} 

Answer 2

@Injectable() 
export class ReviewService { 
    submitReview(id,user_id , .. . //and so on) { 
     let url = `http://mydomain/wp-json/wp/v2/users-reviews/reviews`; 
     let params = new URLSearchParams; 
     params.append('id', id); 
     params.append('user_id', user_id); 
     // ... more params 
     console.log('sending request'); 
     return this.authHttp.post(url, params) 
      .map(
       res => { 
        let newReview = res.json(); 
        this.reviews.push(newReview); 
        console.log(this.reviews); 
        return newReview; 
       } 
      ); 
    } 
} 


class YourComponent(){ 

    constructor(public reviewService:ReviewService){} 

    onSubmit(){ 

     id = this.postId.toString(); 
     user_id = this.wp.getCurrentAuthorId().toString(); 
     //and so on ... 
     this.reviewService.submitReview(id,user_id , .... /and so on) 
      .subscribe(
        data => { 
         this.statusMessage = "Review added successfully!"; 
         //clear form 
         form.reset(); 
        }, 
        error => { 
         console.log(error._body); 
         this.statusMessage = error._body; 
        } 
      ); 
    } 

} 

Answer 3

をあなたはそれが好き行うことができます。サービス

で

コンポーネントで

 @injectable 
     export class ServiceName { 
     submitReview(params): Observable<type> { 
     let url = `http://mydomain/wp-json/wp/v2/users-reviews/reviews`; 
     return this.authHttp.post(url, params) 
       .map(
        res => { 
         let newReview = res.json(); 
         this.reviews.push(newReview); 
         console.log(this.reviews); 
         return newReview; 
        } 
       );      
    } 
} 

を：

import { ServiceName} from './servicefile' 
export class ComponentName(){  
    constructor(private serviceName : ServiceName){ }  
    onSubmit(){  
     //param code... 
     this.serviceName.submitReview(params) 
      .subscribe({ 
         // success code 
        }, 
        error => { 
          // error handling 
        } 
      ); 
    } 
}