Question

我将信息从读取组件传递到编辑组件。我使用了共享服务（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;
}

Answer 1

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

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

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

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

1 个答案: