無法使用共享服務在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的供應商陣列