HTTP 요청이이 코드에서 발생하지 않습니까?

Question

CoreService :

export class CoreService { 

    constructor(private _http: HttpClient) { 
    Common.Socket.next('https://reqres.in'); 
    } 

    httpget(url): any { 
    return Common.Socket 
    .switchMap((x)=> this._http.get(x + url)); 
    } 
    httppost(url, body): any { 
    return Common.Socket 
    .switchMap((x)=> this._http.post(x + url, body, 
    {headers: this.createAuthorizationHeader()} 
    )); 
    } 

    private createAuthorizationHeader() { 
    const headers = new HttpHeaders({'Content-Type':'application/json'}); 
    return headers; 
    } 
} 

구성 요소 서비스 :

export class AppServiceService { 

     constructor(private _coreService: CoreService) { } 
     getAll(path: string){ 
     return this._coreService.httpget(path); 
     } 
    getParticular(url){ 
     return this._coreService.httpget(url); 
     } 
     create(url, body) { 
     return this._coreService.httppost(url, body); 
     } 
    } 

APP 모듈 :

@NgModule({ 
    imports:  [ BrowserModule, FormsModule, HttpClientModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [CoreService] 
}) 
export class AppModule { } 

export class AppComponent implements OnInit { 
     name = 'Angular 5'; 
     public allPosts: any; 
     constructor(private _appServiceService: AppServiceService) { 
     } 
     ngOnInit(): void { 
     this.getAllPosts(); 
     } 
     private getAllPosts(): void { 
     this._appServiceService.getAll('/api/users?page=2').subscribe(
      (res) => { 
      this.allPosts = res; 
      console.log(this.allPosts, 'allposts'); 
      } 
     ); 
     } 
     getParticular(): void { 
     this._appServiceService.getParticular('/api/users/2').subscribe(
      (res) => { 
      this.allPosts = res; 
      console.log(this.allPosts, 'allposts'); 
      } 
     ); 
     } 
createMessage() { 
    const url = '/api/users'; 
    const body = { 'name': 'morpheus-1','job': 'leader'}; 
    this._appServiceService.create(url, body).subscribe(
     (x) => { 
     console.log(x); 
     } 
    ); 
    } 
    } 

이

스피 호출 만들 응용 프로그램 구성 요소 및 getpa app.component.html의 click 이벤트에서 rticular. 코어 서비스는 내가 요청할 때 HTTP 호출을하지 않습니다. 이것을 해결할 솔루션을 제공하십시오. 나는이 문제를 일으키는 rxjs라고 생각한다. 여기에 재현했습니다 ->https://stackblitz.com/edit/angular-rcxgxv.

Answer 1

당신이 CoreService의 각 기능에

Common.Socket.next('https://reqres.in'); 

를 추가 할 때 그것은 노력하고 있어요. URL 대신 제목을 사용하는 대신 문자열 만 사용하십시오.

import { Subject } from 'rxjs/Subject'; 
export class Common { 
    static Socket = "https://reqres.in"; 
} 

다음 CoreService에 약간의 변화를 추가 : 또한

@Injectable() 
export class CoreService { 

    constructor(private _http: HttpClient) { 
    } 

    httpget(url): any { 
    return this._http.get(Common.Socket.toString() + url); 
    } 
    httppost(url, body): any { 
    return this._http.post(Common.Socket.toString() + url, body, 
    {headers: this.createAuthorizationHeader()} 
    ); 
    } 

    private createAuthorizationHeader() { 
    const headers = new HttpHeaders({'Content-Type':'application/json'}); 
    return headers; 
    } 
} 

을 AppComponent 당신이 메시지를 게시 할 때 각도 4 게시물에는 가입이없는 경우 요청 또는 HTTP에 약속 전송하지 않기 때문에 기능 구독을 추가 .post

createMessage() { 
    const url = '/api/users'; 
    const body = { 'name': 'morpheus-1', 'job': 'leader' }; 
    this._appServiceService.create(url, body).subscribe(); 
    }