以角度 6 将数据从一个组件传递到另一个组件

Question

我是 Angular 的新手，我尝试使用服务将一些表单数据从一个组件发送到另一个组件，但它面临一些问题，即它显示错误消息为

错误 TS2339：类型“（数据：任意）=> 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 是无效函数。这就是为什么您收到此错误并且您订阅的值设置不是为了更改。

据我了解，您在这里不需要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

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

Answer 3

我终于找到了答案。这是我的错，我从视图组件的服务中调用了错误的函数

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

}