Angular 错误类型错误：无法读取属性'；邮政'；未定义在Object.ApiClientService.sendRequest的

下面是我的saveComponent代码。我所有的要求都不奏效。当我执行post请求时，我得到“无法读取未定义的属性'post'”

SaveComponent.ts

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';

import {ActivatedRoute, Router} from "@angular/router";


declare var require: any;

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {


  prod = new Liv() ;
  test = require('../../services/index');


  constructor(public router: Router, public activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
  }



  saveProduit() {
    console.log(this.test.ApiClientService.prototype.sendRequest)
    this.prod.id = null;


      this.test.ApiClientService.prototype.save(this.prod)
      .subscribe(data => {
        console.log("this is" + data);
        alert("ID:" + this.prod.nom);
        this.router.navigate(['show-all']);
      }, err => {
        console.log(err);
      });


}}

import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

import {
  Livre
} from './models';

/**
* Created with angular4-swagger-client-generator.
*/
@Injectable()
export class ApiClientService {

  private domain = 'http://localhost:8084';

  constructor(private http: HttpClient, @Optional() @Inject('domain') domain: string ) {
    if (domain) {
      this.domain = domain;
    }
  }


  public save(body: Livre): Observable<HttpResponse<any>> {
    let uri = `/Livre/add`;
    let headers = new HttpHeaders();
    let params = new HttpParams();
    return this.sendRequest<any>('post', uri, headers, params, JSON.stringify(body));
  }

  private sendRequest<T>(method: string, uri: string, headers: HttpHeaders, params: HttpParams, body: any): Observable<HttpResponse<T>> {
     if (method === 'post') {
      return this.http.post<T>(this.domain + uri, body, { headers: headers.set('Content-Type', 'application/json'), params: params, observe: 'response' });
    } else {
      console.error('Unsupported request: ' + method);
      return Observable.throw('Unsupported request: ' + method);
    }
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {ApiClientService} from '../services/index'
import { AppComponent } from './app.component';
import { SaveComponent } from './save/save.component';
import {RouterModule, Routes} from "@angular/router";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import { DeleteComponent } from './delete/delete.component';
import { UpdateComponent } from './update/update.component';
import { SearchComponent } from './search/search.component';
import { ShowAllComponent } from './show-all/show-all.component';

const appRoutes:Routes=[
{path:'new-produit',component:SaveComponent},
{path:'delete-produit',component:DeleteComponent},
{path:'update-produit',component:UpdateComponent},
{path:'search-produit',component:SearchComponent},
{path:'show-all',component:ShowAllComponent},
{path:'',redirectTo:'/show-all', pathMatch:'full'}

]
@NgModule({
  declarations: [
    AppComponent,
    SaveComponent,
    DeleteComponent,
    UpdateComponent,
    SearchComponent,
    ShowAllComponent
  ],
  imports: [
    BrowserModule , HttpClientModule, RouterModule.forRoot(appRoutes), HttpModule, FormsModule
  ],
  providers: [ApiClientService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';
import {ApiClientService} from '../../services/index';

import {ActivatedRoute, Router} from "@angular/router";

// ...

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {

   // ...

  constructor(
    public router: Router, 
    public activatedRoute: ActivatedRoute, 
    private apiClientService: ApiClientService
  ) {}

  // ...    

  saveProduit() {
    this.prod.id = null;
    this.apiClientService.save(this.prod);
    // ...

。/../service/index.ts

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';

import {ActivatedRoute, Router} from "@angular/router";


declare var require: any;

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {


  prod = new Liv() ;
  test = require('../../services/index');


  constructor(public router: Router, public activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
  }



  saveProduit() {
    console.log(this.test.ApiClientService.prototype.sendRequest)
    this.prod.id = null;


      this.test.ApiClientService.prototype.save(this.prod)
      .subscribe(data => {
        console.log("this is" + data);
        alert("ID:" + this.prod.nom);
        this.router.navigate(['show-all']);
      }, err => {
        console.log(err);
      });


}}

import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

import {
  Livre
} from './models';

/**
* Created with angular4-swagger-client-generator.
*/
@Injectable()
export class ApiClientService {

  private domain = 'http://localhost:8084';

  constructor(private http: HttpClient, @Optional() @Inject('domain') domain: string ) {
    if (domain) {
      this.domain = domain;
    }
  }


  public save(body: Livre): Observable<HttpResponse<any>> {
    let uri = `/Livre/add`;
    let headers = new HttpHeaders();
    let params = new HttpParams();
    return this.sendRequest<any>('post', uri, headers, params, JSON.stringify(body));
  }

  private sendRequest<T>(method: string, uri: string, headers: HttpHeaders, params: HttpParams, body: any): Observable<HttpResponse<T>> {
     if (method === 'post') {
      return this.http.post<T>(this.domain + uri, body, { headers: headers.set('Content-Type', 'application/json'), params: params, observe: 'response' });
    } else {
      console.error('Unsupported request: ' + method);
      return Observable.throw('Unsupported request: ' + method);
    }
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {ApiClientService} from '../services/index'
import { AppComponent } from './app.component';
import { SaveComponent } from './save/save.component';
import {RouterModule, Routes} from "@angular/router";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import { DeleteComponent } from './delete/delete.component';
import { UpdateComponent } from './update/update.component';
import { SearchComponent } from './search/search.component';
import { ShowAllComponent } from './show-all/show-all.component';

const appRoutes:Routes=[
{path:'new-produit',component:SaveComponent},
{path:'delete-produit',component:DeleteComponent},
{path:'update-produit',component:UpdateComponent},
{path:'search-produit',component:SearchComponent},
{path:'show-all',component:ShowAllComponent},
{path:'',redirectTo:'/show-all', pathMatch:'full'}

]
@NgModule({
  declarations: [
    AppComponent,
    SaveComponent,
    DeleteComponent,
    UpdateComponent,
    SearchComponent,
    ShowAllComponent
  ],
  imports: [
    BrowserModule , HttpClientModule, RouterModule.forRoot(appRoutes), HttpModule, FormsModule
  ],
  providers: [ApiClientService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';
import {ApiClientService} from '../../services/index';

import {ActivatedRoute, Router} from "@angular/router";

// ...

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {

   // ...

  constructor(
    public router: Router, 
    public activatedRoute: ActivatedRoute, 
    private apiClientService: ApiClientService
  ) {}

  // ...    

  saveProduit() {
    this.prod.id = null;
    this.apiClientService.save(this.prod);
    // ...

错误

SaveComponent.html:19 ERROR TypeError: Cannot read property 'post' of undefined
    at Object.ApiClientService.sendRequest (index.ts:90)
    at Object.ApiClientService.save (index.ts:32)
    at SaveComponent.saveProduit (save.component.ts:35)
    at Object.eval [as handleEvent] (SaveComponent.html:19)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)

---

我尝试导入带有函数require的服务，但de http没有被注入de ts文件中

以下是使用依赖项注入的正确方法。您不应该使用您使用的原型方式，因为它不会正确实例化类

要使该服务可用于依赖项注入，您需要将其添加到模块的

提供的
列表中。您可能需要阅读关于依赖项注入的内容

SaveComponent.ts

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';

import {ActivatedRoute, Router} from "@angular/router";


declare var require: any;

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {


  prod = new Liv() ;
  test = require('../../services/index');


  constructor(public router: Router, public activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
  }



  saveProduit() {
    console.log(this.test.ApiClientService.prototype.sendRequest)
    this.prod.id = null;


      this.test.ApiClientService.prototype.save(this.prod)
      .subscribe(data => {
        console.log("this is" + data);
        alert("ID:" + this.prod.nom);
        this.router.navigate(['show-all']);
      }, err => {
        console.log(err);
      });


}}

import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

import {
  Livre
} from './models';

/**
* Created with angular4-swagger-client-generator.
*/
@Injectable()
export class ApiClientService {

  private domain = 'http://localhost:8084';

  constructor(private http: HttpClient, @Optional() @Inject('domain') domain: string ) {
    if (domain) {
      this.domain = domain;
    }
  }


  public save(body: Livre): Observable<HttpResponse<any>> {
    let uri = `/Livre/add`;
    let headers = new HttpHeaders();
    let params = new HttpParams();
    return this.sendRequest<any>('post', uri, headers, params, JSON.stringify(body));
  }

  private sendRequest<T>(method: string, uri: string, headers: HttpHeaders, params: HttpParams, body: any): Observable<HttpResponse<T>> {
     if (method === 'post') {
      return this.http.post<T>(this.domain + uri, body, { headers: headers.set('Content-Type', 'application/json'), params: params, observe: 'response' });
    } else {
      console.error('Unsupported request: ' + method);
      return Observable.throw('Unsupported request: ' + method);
    }
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {ApiClientService} from '../services/index'
import { AppComponent } from './app.component';
import { SaveComponent } from './save/save.component';
import {RouterModule, Routes} from "@angular/router";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import { DeleteComponent } from './delete/delete.component';
import { UpdateComponent } from './update/update.component';
import { SearchComponent } from './search/search.component';
import { ShowAllComponent } from './show-all/show-all.component';

const appRoutes:Routes=[
{path:'new-produit',component:SaveComponent},
{path:'delete-produit',component:DeleteComponent},
{path:'update-produit',component:UpdateComponent},
{path:'search-produit',component:SearchComponent},
{path:'show-all',component:ShowAllComponent},
{path:'',redirectTo:'/show-all', pathMatch:'full'}

]
@NgModule({
  declarations: [
    AppComponent,
    SaveComponent,
    DeleteComponent,
    UpdateComponent,
    SearchComponent,
    ShowAllComponent
  ],
  imports: [
    BrowserModule , HttpClientModule, RouterModule.forRoot(appRoutes), HttpModule, FormsModule
  ],
  providers: [ApiClientService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';
import {ApiClientService} from '../../services/index';

import {ActivatedRoute, Router} from "@angular/router";

// ...

@Component({
  selector: 'app-save',
  templateUrl: './save.component.html',
  styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {

   // ...

  constructor(
    public router: Router, 
    public activatedRoute: ActivatedRoute, 
    private apiClientService: ApiClientService
  ) {}

  // ...    

  saveProduit() {
    this.prod.id = null;
    this.apiClientService.save(this.prod);
    // ...

为什么你要使用
this.test.ApiClientService.prototype.save
而不是
this.ApiClientService.save
并将服务注入客户端？服务的路径是通用的，我有很多服务是通用的，例如：服务产品在（../user/Product/index.ts）中，服务类别在（../user/category/index.ts）中我想使用require（../user/product/index）我必须有一个通用的服务导入我的密钥是未知的，我从其他服务那里获取导入，因为我使用require，我不能插入构造函数，因为我没有它。我不理解你的评论，抱歉。同样，如果你在JS中调用原型函数，这个上下文将与构建的对象不同。您需要在函数中手动注入
HttpClient
，但这将违背您的理念。也许你应该解释一下为什么你需要这样做，以便有人能提出一个替代方案；tes=AppModule.injector.get（tes.ApiClientService）；tes.save（this.contact）.subscribe（data=>{this.contact=data；this.mode=2；}，err=>{console.log（err）；}）`但是现在我必须将提供程序中的
tes.ApiClientService
声明到组件的方法中，而不是在AppModuley中使用声明您的用例仍然不清楚。也就是说，你应该用一个特定的用例来澄清你的问题，以获得更好的答案。好吧，我的案例是使用一个通用服务，因为我有很多服务都是由一个招摇过市的客户端API生成的示例：第一个服务位于：../user/product/index，其他服务位于../user/categories/index，著名的方法是使用：从“路径”导入服务，对于我的情况，路径是通用的，所以我不能使用导入，我使用了require（“我的服务”），我可以调用我的服务，但服务不能调用http.post，所以我们使用：
var tes=require（'../../services/contact/index'）；tes=AppModule.injector.get（tes.ApiClientService）