繁体   English   中英

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

[英]Pass data from one component to another in angular 6

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

错误 TS2339:属性“订阅”在类型“(数据:任何)=> 无效”上不存在。

这是我拥有数据的组件

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

任何帮助都是可观的。

我可以注意到这里有多个错误。

首先要注意的是BehaviorSubject.next是 void 函数。 这就是为什么您会收到此错误并且您订阅的不是用于更改的值集。

据我了解,您在这里不需要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);
  }

}

享受!

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

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

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

}

暂无
暂无

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

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