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

时间:2017-08-28 20:37:56

标签: angular

我将信息从读取组件传递到编辑组件。我使用了共享服务(modeled off of this post),但在子组件中,Employee信息为null。我想也许我无意中将服务实例化了两次,这就是为什么它是空的(?)但不知道我在做什么。带有// 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;
}

1 个答案:

答案 0 :(得分:3)

原因是特定组件提供的服务实例(您现在正在进行)不能被其他组件访问。

如果您想将服务用作单身人士,则应在@NgModule的提供者阵列中提供。

因此,只需从EmployeesService的提供者数组中删除EmployeeParentComponent,然后将其添加到@NgModule的提供者数组