无法使用共享服务在 Angular 2 组件之间传递数据答案

【问题标题】：Unable to pass data between Angular 2 components using a shared service无法使用共享服务在 Angular 2 组件之间传递数据
【发布时间】：2017-08-29 04:48:20
【问题描述】：

我正在将信息从读取组件传递到编辑组件。我使用了共享服务 (modeled off of this post)，但在子组件中，员工信息为空。我想也许我无意中两次实例化了服务，这就是为什么它是空的（？）但不确定我在哪里做这个。带有 //undefined 的行应该与父级具有相同的员工信息（父级正在工作）

家长

@Component({
    providers: [EmployeesService]
})

export class EmployeeParentComponent {
    private employee: Employee;

    constructor(
        private employeesService: EmployeesService,
        protected router: Router,
        protected route: ActivatedRoute,) { }

    ngOnInit(): void {

    }
//called from HTML template on Edit button click
    toggleEditMode(employee: Employee) {
        this.employeesService.employee = employee;
        alert(this.employeesService.employee.firstName); //correct name
        this.router.navigate('/editPage')
    }
}

儿童

@Component({
    providers: []
})

export class EditEmployeeComponent {
    constructor(
        private employeesService: EmployeesService
        ) {
        console.info(employeesService.employee); //undefined
    }

    ngOnInit(): void {
        console.info(this.employeesService.employee); //undefined
    }
}

服务

@Injectable()
export class EmployeesService {
    public employee: Employee;
}

【问题讨论】：

标签： angular

【解决方案1】：

原因是特定组件（你现在正在做的）提供的服务实例不能被另一个组件访问。

如果您想将服务用作单例，您应该在 @NgModule 的 providers 数组中提供它。

所以只需从EmployeeParentComponent 的提供者数组中删除EmployeesService 并将其添加到您的@NgModule 的提供者数组中

【讨论】：