简体   繁体   English

在带有angular2的服务中注入表单值

[英]Inject form value in a service with angular2

I am trying to pass the input values of a form (mdf) to another component using a service.This is my service: 我正在尝试使用服务将表单(mdf)的输入值传递给另一个组件。这是我的服务:

sharedData.service.ts sharedData.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SharedDataService {
    eventData: any=[];

    constructor() {}
    setEventData(data: any)
    {
      this.eventData.push(data);
    }

    getEventData()
    {
      return this.eventData;
    }
}

In the first component, when I'm clicking a button I want to pass the form value to the service: 在第一个组件中,当我单击按钮时,我想将表单值传递给服务:

formData.component.html formData.component.html

<form [formGroup]="eventForm" novalidate (ngSubmit)="eventForm.valid && add(eventForm.value)">
<fieldset>
<input  name="title" formControlName="title" type="text">
......
<a [routerLink]="['/preview']" target="_blank" class="btn btn-primary" (click)="preview(eventForm.value)">Preview</a>
......
</fieldset>
</form>

formData.component.ts formData.component.ts

preview(eventData: any)
  {
    this.sharedData.setEventData(eventData);
  }

preview.component.ts preview.component.ts

ngOnInit() {
    this.eventData=this.sharedData.getEventData();

  }

but nothing shows up in 但什么都没有出现

preview.component.html preview.component.html

<b>Event Title: </b> {{eventData.title}}

oky.. Try below code. 好的。尝试以下代码。 It might help : - Try adding RxJs for setting and getting data .Example: 它可能会有所帮助:-尝试添加RxJ来设置和获取数据。示例:

import { Injectable ,Input } from '@angular/core';
import { BehaviorSubject }    from 'rxjs/BehaviorSubject';

@Injectable()
export class SharedDataService {

    private eventDataDetails = new BehaviorSubject<Object>(this.details);
    eventDataDetailsAsObservable = this.eventDataDetails.asObservable();
    eventData: any=[];

    setEventData(data : Object){
        this.eventDataDetails.next(data);
    }

    getEventData(){
        return this.eventDataDetails.getValue();
    }
}

In your component : import sharedService; 在您的组件中:import sharedService;

in your constructor of preview component write below lines:- 在预览组件的构造函数中,在下面的行中编写:

this.sharedDataService.eventDataDetailsAsObservable.subscribe(
            (eventDataResponse: any) => {
                // Your logic here
                this.eventData=this.eventDataResponse;
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM