将对象从一个类传递到另一个未定义的

Question

我有一个显示对象列表的组件。单击此列表中的某个元素时，我想将该对象传递给另一个页面上的另一个组件。

所以基本上是列表组件 - ＆gt;服务组件 - ＆gt;细节组件 - ＆gt;显示单击的列表组件详细信息

列表组件：

setCurrentMovie(movie: IMovie){
    this._currentMovieService.setCurrentMovie(movie);
  }

我用来跟踪当前对象的服务类

  setCurrentMovie(movie: IMovie){
    this.movie = movie;
  }
  getCurrentMovie(): Observable<IMovie>{
    return of(this.movie);
  }

Details显示当前对象的组件

getCurrentMovie(){
 console.log(this._currentMovieService.getCurrentMovie().subscribe(value=>this.currentMovie = value)); // logs undefined
}

详细信息组件html

<div *ngIf="currentMovie">
  {{currentMovie.MovieName}}
</div>

然而，这并没有显示任何内容。

Answer 1

当您的组件初始化并且您的ngOnInit肯定会返回getCurrentMovie()时，会执行

undefined，因为该值尚未设置。稍后当您设置值时，不会调用getCurrentMovie方法，您可以强行调用它或转到Behavior Subject

我建议您选择RxJS BehaviorSubject

你也可以使用常规的RxJS Subject 服务，但这里有一些优势subject。

1. 它将始终返回订阅时的当前值 - 无需拨打onnext().
2. 它有一个getValue（）函数来提取最后一个值作为原始数据。
3. 确保组件始终接收最新数据。
4. 您可以使用asobservable()从行为主题中获得观察结果      关于行为主体的方法。
5. 的 Refer this for more

服务

import { Injectable } from '@angular/core';
import {Imovie} from './imovie'
import {Observable,of,BehaviorSubject} from 'rxjs';
@Injectable()
export class ShareDataService {

private Movie= new BehaviorSubject<Imovie>(null);
  currentMovie = this.Movie.asObservable();

  constructor() { }

setCurrentMovie(movie:Imovie)
{
  this.Movie.next(movie);
}
}

<强>组件-1

import { Component, Input } from '@angular/core';
import {ShareDataService} from './share-data.service'
import {Imovie} from './imovie'
@Component({
  selector: 'hello',
  template: `<div *ngIf="currentMovie">
  <h2>{{currentMovie.name}}</h2>
   <h2>{{currentMovie.genre}}</h2>
</div>`,
  styles: [`h1 { font-family: Lato; }`] 
})
export class HelloComponent  {
  public currentMovie:Imovie;
 constructor(public service:ShareDataService)
 {
   this.service.currentMovie.subscribe((value)=>{this.currentMovie=value
     console.log(this.currentMovie);
   });
 }

}

<强>组件-2

import { Component } from '@angular/core';
import {ShareDataService} from './share-data.service'
import {Imovie} from './imovie';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public movie:Imovie
  constructor(public service:ShareDataService)
  {

  }
setMovie()
{
this.movie={name:'grudge',genre:'horror'};
this.service.setCurrentMovie(this.movie);
}
}

第2部分HTML

<button (click)="setMovie()" >SetMovie</button>
<hello></hello>

<强> LIVE DEMO