一个解决方法是通过使用一个中介服务来传递数据。在中介服务中创建一个可观察对象,通过使用该对象来传递数据。给需要访问数据的组件订阅这个可观察对象,每次该对象发生更改时就会触发这些组件。
下面是一个使用中介服务来传递数据的示例:
在first-child.component.ts中,创建一个输出事件:
@Output() public employeeData = new EventEmitter
在first-child.component.html中,触发输出事件:
onClick() { let employee = { id: 1, name: 'John Doe' }; this.employeeData.emit(employee); }
创建一个名为MediatorService的服务:
import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MediatorService {
private employeeData$: Subject
public sendEmployeeData(employee: any) { this.employeeData$.next(employee); }
public getEmployeeData(): Observable
}
在first-child.component.ts中,注入中介服务并触发事件:
import { MediatorService } from './mediator.service';
@Component({
selector: 'app-first-child',
template:
})
export class FirstChildComponent {
constructor(private mediatorService: MediatorService) {}
onClick() { let employee = { id: 1, name: 'John Doe' }; this.mediatorService.sendEmployeeData(employee); }
}
在second-child.component.ts中,订阅中介服务并获取相应的数据:
import { MediatorService } from './mediator.service';
@Component({ selector: 'app-second-child', template: ``, styleUrls: ['./second-child.component.css'] }) export class SecondChildComponent implements OnInit {
constructor(private mediatorService: MediatorService) {}
ngOnInit(): void { this.mediatorService.getEmployeeData().subscribe((employee) => { console.log('Received employee data:', employee); }); }
}
这样,第二个子组件就可以从第一个子组件中获取数据,并且不用直接传递数据。