Angular 如何分离组件和服务？

我目前有一个功能，允许我在我的应用程序上发布评论和文章评论。 我想解除这个基于URLSearchParams的函数的关联（我想这是我不掌握的主要问题），将API部分放入我当前组件中的服务和post函数中。 基本上，我希望在服务中有我的URL+my

.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;
                }
        );
}

有人会有一个想法或一个医生让我过得去吗？ 谢谢：）

您可以这样做：

在职

        @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;
                    }
                );                    
    }
}

你可以这样做：

在职

        @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;
                    }
                );                    
    }
}

---

看起来您现在所有的代码都在组件中，所以您需要创建一个服务。如果您的表单格式正确，我的意思是您可以提取请求中需要的所有值，而不是使用

this.postId

，使用

form.postId

//必要的导入
@可注射（）
导出类MyService{
构造函数（私有http:http）{}
//在此处添加正确的参数
提交数据（表格）{
//附加参数并提出请求：
返回此.http.post（url，参数）
.map（res=>res.json（））
}   
}

然后在组件中进行订阅

评论：任意[]=[]；
构造函数（私有myService:myService）{}
提交视图（表格）{
this.myService.submitData（表单）
.订阅（newReview=>{
this.reviews.push（newReview）；
this.statusMessage=“已成功添加审阅！”；
//清晰的形式
form.reset（）；
});
}

现在组件中似乎包含了所有代码，因此需要创建一个服务。如果您的表单格式正确，我的意思是您可以提取请求中需要的所有值，而不是使用

this.postId

，使用

form.postId

//必要的导入
@可注射（）
导出类MyService{
构造函数（私有http:http）{}
//在此处添加正确的参数
提交数据（表格）{
//附加参数并提出请求：
返回此.http.post（url，参数）
.map（res=>res.json（））
}   
}

然后在组件中进行订阅

评论：任意[]=[]；
构造函数（私有myService:myService）{}
提交视图（表格）{
this.myService.submitData（表单）
.订阅（newReview=>{
this.reviews.push（newReview）；
this.statusMessage=“已成功添加审阅！”；
//清晰的形式
form.reset（）；
});
}

有一件事，我更喜欢将参数放在组件中。有一件事，我更喜欢将参数放在组件中。

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