私はかなり単純なセットアップだと思ったものを持っています。プロファイル入力コンポーネントでユーザー プロファイルを作成しています。次に、フォームが送信されてユーザーが作成された後、ユーザーを profile-img-upload コンポーネントに送信して写真を追加したいと考えています。これは、作成したプロファイルをプロファイル サービスに保存し、そのプロファイルを img-upload コンポーネントで呼び出すことで実現できると理解しています。しかし、img-upload コンポーネントconsole.log(this.profile)に到達するとプロファイルが常に null になるため、何かが欠けています。
ここで、サブスクリプションとオブザーバブルの核となる何かを誤解しているように感じます。私がやりたいことは、最初のコンポーネントでプロファイル オブジェクトを作成し、作成したプロファイルを 2 番目のコンポーネントに渡して、写真をアップロードしてプロファイルに割り当てることだけです。
誰かが私がここで欠けているものを理解するのを手伝ってくれますか?
プロファイル入力.コンポーネント
import...
@Component({
moduleId: module.id,
selector: 'my-profile-input',
templateUrl: 'profile-input.template.html',
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class ProfileInputComponent implements OnInit {
@Output() profile: Profile;
profile: Profile = null;
constructor(private formBuilder:FormBuilder,
private profileSrevice: ProfileService,
private errorService: ErrorService,
private router: Router,
private route: ActivatedRoute) {}
onSubmit() {
const profile: Profile = new Profile(
this.profileForm.value.first_name,
this.profileForm.value.last_name
);
this.profileSrevice.addProfile(profile)
.subscribe(
data => {
console.log('what comes back from addProfile is: ' + JSON.stringify(data));
this.profileSrevice.profiles.push(data);
// The line below will superceded the one above.
this.profileSrevice.pushData(data);
},
error => this.errorService.handleError(error)
);
this.router.navigate(['profile-img-upload', {myProfile: this.profile}]);
}
profile.service.ts
import...
@Injectable()
export class ProfileService {
pushedData = new EventEmitter<Profile>();
pushData(value: Profile) {
this.pushedData.emit(value);
console.log('value in service is ');
console.log(value);
}
}
profile-img-upload.component.ts
import...
@Component({
moduleId: module.id,
selector: 'my-profile-img-upload',
templateUrl: 'profile-img-upload.template.html',
directives: [ ROUTER_DIRECTIVES, FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES ],
providers: [AWSUploadService, UploadFileService]
})
export class ProfileImgUploadComponent implements OnInit {
@Input() myProfile: Profile;
profile: Profile;
constructor(private uploadFileService: UploadFileService,
private route: ActivatedRoute,
private profileService: ProfileService,
private errorService: ErrorService) {
this.filesToUpload = [];}
ngOnInit() {
this.profileService.pushedData.subscribe(
(value: Profile) => this.profile
);
console.log("this.profile in img upload is");
console.log(this.profile);
}
}