Angular 6如何通过管道进行http调用

我有一个HTTP服务，它使用HttpClient进行API调用：

//provider.service.ts
export interface Lesson {
    id?: number,
    name: string,
    type: LessonType,
    teacher_data: string,
    student_data: string
}

export class ProviderService {
    constructor(private http: HttpClient) {}

    postLesson(form): Observable<Lesson> {        
        const body = this.getFormUrlEncoded(form.value);
        return this.http.post<Lesson>('/api/lesson/', body, this.postHttpOptions);
    }
}

它工作得很好，一切都很好。现在我想做一个LessonService，让所有http调用都通过该服务。它将缓存结果、在更改时发出等

我是这样写的：

//updated lessons.component.ts
    onSubmit():void {
        this.LessonsService.createLesson(this.lessonForm).subscribe(result=> {
            console.log(result);
            //do my stuff
        });
    }

//lessons.service.ts
export class LessonsService {
    constructor(private http: ProviderService) {}

    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form);
        observable.pipe(
            map(result => {
                //this code is not executed, I do not understand why                
                this.lessonChange.emit(result);
                return result;
            })
        );    
        return observable;
  }
}

//更新了lessons.component.ts
onSubmit（）：void{
this.LessonsService.createLesson（this.lessonForm）.subscribe（结果=>{
控制台日志（结果）；
//做我的事
});
}
//课程服务
导出类LessonsService{
构造函数（专用http:ProviderService）{}
@Output（）lessonChange:EventEmitter=neweventemitter（）；
公共课程（形式）：可观察{
让observable=this.http.postLesson（form）；
可见光管(
映射（结果=>{
//这段代码没有执行，我不明白为什么
此.lessonChange.emit（结果）；
返回结果；
})
);    
可观测收益；
}
}

---

我想在从HTTP提供程序获得结果时发出一个事件。我做错了什么？

有两种方法可以做到这一点，一种是将

管道

放入变量声明中，并使用

点击

而不是

映射

export class LessonsService {
    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form).pipe(
            tap(result => {
                //this code is not executed, I do not understand why                
                this.lessonChange.emit(result);
                return result;
            })
        );    
        return observable;
  }
}

导出类LessonsService{
@Output（）lessonChange:EventEmitter=neweventemitter（）；
公共课程（形式）：可观察{
让observable=this.http.postLesson（form.pipe）(
点击（结果=>{
//这段代码没有执行，我不明白为什么
此.lessonChange.emit（结果）；
返回结果；
})
);    
可观测收益；
}
}

另一种方法是创建对变量的订阅

export class LessonsService {
    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form);
        observable.subscribe(result => {
            //this code is not executed, I do not understand why                
            this.lessonChange.emit(result);
            return result;
        );    
        return observable;
  }
}

导出类LessonsService{
@Output（）lessonChange:EventEmitter=neweventemitter（）；
公共课程（形式）：可观察{
让observable=this.http.postLesson（form）；
可观察。订阅（结果=>{
//这段代码没有执行，我不明白为什么
此.lessonChange.emit（结果）；
返回结果；
);    
可观测收益；
}
}

---

我个人会选择后者，这样可以确保事件只在成功时发出。

在第二种方法中，将有两个http调用，不是吗？第一个将在组件订阅时执行，第二个将在service@RustamGaneyev这是可能发生的，但是如果你使用Angular这样的库，这是最好的方法o这样做。

export class LessonsService {
    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form);
        observable.subscribe(result => {
            //this code is not executed, I do not understand why                
            this.lessonChange.emit(result);
            return result;
        );    
        return observable;
  }
}