2017-08-28 9 views
0

読み取りコンポーネントから編集コンポーネントに情報を渡しています。私は共有サービス(modeled off of this post)を使用しましたが、子コンポーネントでは従業員情報はnullです。私はおそらく私が意図せずにサービスを2回インスタンス化していると思うのですが、それはなぜ空であるのですか(?) //未定義での行は親と同じ従業員情報(親が働いている)共有サービスを使用してAngular 2コンポーネント間でデータを渡すことができません

@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

理由は、特定のコンポーネント(現在やっている)が提供するサービスインスタンスに別のコンポーネントがアクセスできないためです。

サービスをシングルトンとして使用する場合は、@NgModuleのproviders配列に指定する必要があります。

だからEmployeeParentComponentのプロバイダの配列からEmployeesServiceを削除し、あなたの@NgModuleのプロバイダの配列

に追加します
関連する問題