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

Question

我正在将信息从读取组件传递到编辑组件。 我使用了共享服务（ 以本文为蓝本 ），但是在子组件中，Employee信息为null。 我想可能是我无意间实例化了两次服务，这就是为什么它为空（？），但不确定在哪里执行此操作。 //未定义的行应与父级具有相同的员工信息（父级正在工作）

亲

@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;
}

Answer 1

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

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

所以只要删除EmployeesService从供应商阵列EmployeeParentComponent并将其添加到您的@NgModule的供应商阵列