在缺少直接连接的组件之间传递数据时,例如兄弟姐妹,孙子孙等,您应该使用共享服务 .
您可以尝试以下代码段 .
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class SharedService {
private messageSource = new BehaviorSubject("list");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
//器Comp1
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
message:string;
constructor(private data: SharedService) {
}
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
console.log(this.message);
}
}
//器Comp2
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
selector: 'app-comp2',
templateUrl: './comp2.component.html',
styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {
message:string;
constructor(private data: SharedService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
console.log(this.message);
}
}