Pass data from one component to another in angular 6

问题

I'm new to angular i tried to send some formdata from one component to another by using service but it faces some issue ie , it shows error message as

error TS2339: Property 'subscribe' does not exist on type '(data: any) => void'.

This is the component that i had my data

    import { Component, OnInit } from '@angular/core';
import { JarwisService } from '../../Services/jarwis.service';
import { DataTransferService } from '../../dt-broker/dt-core/services/data-transfer.service';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { environment } from 'environments/environment';
import { NgForm } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-addlist',
  templateUrl: './addlist.component.html',
  styleUrls: ['./addlist.component.css']
})
export class AddlistComponent implements OnInit {

   constructor(private Jarwis:JarwisService,
               private dataTrans: DataTransferService,
               private router : Router,
               private http: HttpClient,
               private  _router : Router,
               private activatedRoute: ActivatedRoute) { }


  preview(form: NgForm){
    this.Jarwis.getpreviewcontent(form.value).subscribe(
      viewdata => this.handlepreviewResponse(viewdata)
    );
  }
  handlepreviewResponse(data){
    this.dataTrans.setpreviewdata(data);
    this.router.navigate(['/previewad']);
  }

}

This is the component that i want to send the data

import { Component, OnInit } from '@angular/core';
import { DataTransferService } from '../../../dt-broker/dt-core/services/data-transfer.service';
@Component({
  selector: 'ngx-previewad',
  templateUrl: './previewad.component.html',
  styleUrls: ['./previewad.component.scss']
})
export class PreviewadComponent implements OnInit {

  constructor(private dataTrans: DataTransferService) { }

  public result=null;
  ngOnInit() {
    // console.log(this.dataTrans.setpreviewdata);
    //alert(this.result);
   this.dataTrans.setpreviewdata.subscribe(message => this.result = message);
  }

}

This s the service that i wrote to transfer the data

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

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {


  private previewdata = new BehaviorSubject('no data');
  datapreview = this.previewdata.asObservable();

  constructor() { }


  setpreviewdata(data){
    return this.previewdata.next(data);
    //console.log(this.datapreview);
  }
}

Any help is appreciable.

回答1:

I can notice multiple mistakes here.

First thing to note is BehaviorSubject.next is void function. That's why you are getting this error and you are subscribing to value set not for the change.

So far as I understand you don't need BehaviorSubject here. Use EventEmitter instead.

Your service will be shape as follows.

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

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {
  public previewdata = new EventEmitter();
}

Send your data as follows

----- bunch of code ----
export class AddlistComponent implements OnInit {

   constructor(private Jarwis:JarwisService,
               private dataTrans: DataTransferService,
               private router : Router,
               private http: HttpClient,
               private  _router : Router,
               private activatedRoute: ActivatedRoute) { }


  preview(form: NgForm){
    this.Jarwis.getpreviewcontent(form.value).subscribe(
      viewdata => this.handlepreviewResponse(viewdata)
    );
  }
  handlepreviewResponse(data){
    this.dataTrans.previewdata.emit(data);
    this.router.navigate(['/previewad']);
  }

}

Receive data using subscription as below.

--- bunch of code ---
export class PreviewadComponent implements OnInit {

  constructor(private dataTrans: DataTransferService) { }

  public result=null;
  ngOnInit() {
   this.dataTrans.previewdata.subscribe(message => this.result = message);
  }

}

Enjoy!

回答2:

you are declaring a BehaviorSubject private instead of public.

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

  @Injectable({
    providedIn: 'root'
  })
  export class DataTransferService {


  public previewdata = new BehaviorSubject('no data');
  datapreview = this.previewdata.asObservable();

  constructor() { }


  setpreviewdata(data){
      this.previewdata.next(data);
      //console.log(this.datapreview);
    }

  getpreviewMessage(): Observable<any> {
      return this.previewdata.asObservable();
  }
 }

component you want to get the data

   import { Component, OnInit } from '@angular/core';
   import { DataTransferService } from '../../../dt-broker/dt- 
     core/services/data-transfer.service';
   @Component({
      selector: 'ngx-previewad',
      templateUrl: './previewad.component.html',
      styleUrls: ['./previewad.component.scss']
   })
   export class PreviewadComponent implements OnInit {

   constructor(private dataTrans: DataTransferService) { }

   public result=null;
   ngOnInit() {
    // console.log(this.dataTrans.setpreviewdata);
    //alert(this.result);
    this.dataTrans.getpreviewMessage.subscribe(message => this.result = 
    message);
    }
   }

回答3:

finally i found my answer . It was my fault i called wrong function from service in the view component

export class PreviewadComponent implements OnInit {

  constructor(public dataTrans: DataTransferService) { }

  public result=null;
   ngOnInit() {
    this.dataTrans.datapreview.subscribe(message => this.result = message);
    // console.log(this.result);
    }

}

来源：https://stackoverflow.com/questions/55427995/pass-data-from-one-component-to-another-in-angular-6