我正在尝试在角度4的组件之间传递数据。
我不想使用输入\输出。
在Homecomponent中,我想将数据推送到服务中,在page2组件中,我想从服务中获取数据。
我只是以可观察和主题的方式看待问题,我尝试将其实施失败。
家庭组件
import { ClientService } from './../clinet-service.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'page-home',
template: 'pages/home/home.html',
})
export class HomeComponent implements OnInit {
clients = ['john', 'jane']
clientFound = false
// constructor(private navController: NavController) { }
constructor(private clientService: ClientService) {
}
openClient(client) {
}
ngOnInit() {
this.clientService.subject.next([
{ name: 'Harold', age: 35 }
]
);
}
}
page2component
import { ClientService } from './../clinet-service.service';
import { Component } from '@angular/core';
@Component({
selector: 'page-2',
template: '{{clients}}'
})
export class Page2Component {
client:any;
constructor( private clientService: ClientService) {
}
ngOnInit(){
debugger
let clients = this.clientService.observable.subscribe(clients => console.log(clients));
}
}
客户服务
import { Injectable, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from "rxjs/Observable";
@Injectable()
export class ClientService {
subject: Subject<any> = new Subject<any>();
observable: Observable<any> = this.subject.asObservable();
}
实际上,我不喜欢这种实现方式,因为我试图将诸如推送数据之类的简单事情提供给服务并在其他组件中获取,但我做不到。
最佳答案
您无法做到这一点,因为它使不必要的复杂化。这是您应该怎么做:
家庭组件
ngOnInit() {
this.clientService.subject.next([{
{name: 'Harold', age: 35 },
{name: 'Kumar', age: 40 },
}]);
}
page2Component
ngOnInit(){
let clients = this.clientService.observable.subscribe(clients => console.log(clients));
}
服务
export class ClientService {
subject: Subject<any> = new Subject<any>();
observable: Observable<any> = this.subject.asObservable();
constructor() {}
}