如何将表单值传递给服务构造函数到 Observable答案

【问题标题】：How to pass a form value to a service constructor into an Observable如何将表单值传递给服务构造函数到 Observable
【发布时间】：2017-10-12 06:29:08
【问题描述】：

我想将表单值传递给要在 Observable 中使用的服务。在将服务注入组件时如何传递名称值？该服务一直使用环境变量，但我是通过一个表单来自定义名称。谢谢！

class Component {
    constructor(private myService: MYService){}

    customer: Customer = new Customer();

    updateService(customerForm: NgForm){ ..get it to service 
      customerForm.value.name;        }



class MyService {
   openId: Observable<OpenId>;

 constructor(private http: Http, private router: Router){
    \\ How do I get this.name from component?
    this.openId = this.getOpenID(this.name);
  }

 private getOpenId(name: string): Observable<OpenId>{
   return this.http.get(`${name}`).map(res => res.json()).publishlast().refCount();
 }

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

如果您已经在组件的构造函数中启动了服务，那么您不能稍后在组件中将值传递给服务的构造函数。我认为您需要做的是在组件中创建一个局部变量或 FormGroup，然后通过表单提交等事件将其发送到服务。

mycomponent.ts

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component( {
    templateUrl: 'mycomponent.html',
} )

export class MyComponent {
    customerForm : FromGroup;

    constructor(private myService: MyService){}

    ngOnInit() {
        this.customerForm = this.formBuilder.group( {
            name : ""
        } );
    }

    // Call this on your form submit, and optionally subscribe to the observable
    updateService() {
        this.myService.getOpenId( this.customerForm.get( "name" ).value ).subscribe( {
            data => {},
            error => {}
        } );
    }
}

myservice.ts

export class MyService {
    constructor(private http: Http){}

    // Make this method publicly accessible, or modify it to suit your need
    getOpenId(name) : Observable<OpenId> {
        return this.http.get(`${name}`).map(res => res.json()).publishlast().refCount();
    }
}

当然，您需要模板中的表单。这样的事情会做：

mycomponent.html

<form [formGroup]="customerForm" (ngSubmit)="updateService()">
    <input type="text" name="name" formControlName="name" />
    <input type="submit" value="Submit">
</form>

由于它的灵活性，我使用 ReactiveForm 构建了这个示例。如果这样做，请确保将其导入 app.module。

app.module.ts

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ReactiveFormsModule,
        FormsModule
    ],
    ......
})

export class AppModule { }

【讨论】：

【解决方案2】：

在您的组件中。请注意您如何订阅服务公开的 Observable

class Component {
   customer: Customer = new Customer();
   constructor(private service: Service){}

  updateService(customerForm: NgForm){ 
    this.service.updateService(customerForm.value.name)
      .subscribe(response => response);
  }
}

在您的组件中自定义您的名称后，您将其传递给您的服务中的公共方法 updateService，然后在您的服务中

class Service {
  openId: Observable<OpenId>;

  updateService(name: string): Observable<any> { 
    return this.http.get(`${name}`).map(res => 
       res.json()).publishlast().refCount();
  }
}

【讨论】：