[英]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.