Передача данных от одного компонента к другому в угловых 6

Question

Я новичок в angular. Я пытался отправить некоторые формоданные из одного компонента в другой с помощью службы, но он сталкивается с некоторой проблемой, т. Е. Он отображает сообщение об ошибке как

ошибка TS2339: свойство 'подписаться«не существует по типу» (data: any) => void '.

Это компонент, который у меня был, мои данные

    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']);
  }

}

Это компонент, который яхочу отправить данные

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);
  }

}

Это служба, которую я написал для передачи данных

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);
  }
}

Любая помощь является заметной.

Answer 1

Я могу заметить несколько ошибок здесь.

Первое, что нужно отметить, это BehaviorSubject.next void function. Вот почему вы получаете эту ошибку, и вы подписываетесь на значение, установленное не для изменения.

Насколько я понимаю, вам не нужно BehaviorSubject здесь. Вместо этого используйте EventEmitter.

Ваша служба будет выглядеть следующим образом.

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

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

Отправьте ваши данные следующим образом

----- 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']);
  }

}

Получать данные, используя подписку, как показано ниже.

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

  constructor(private dataTrans: DataTransferService) { }

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

}

Наслаждайтесь!

Answer 2

наконец я нашел свой ответ.Это была моя ошибка, я вызвал неправильную функцию из сервиса в компоненте вида

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);
    }

}

Answer 3

вы объявляете частный объект BehaviorSubject вместо публичного.

  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();
  }
 }

компонент, для которого вы хотите получить данные

   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);
    }
   }