Передача объекта из одного класса в другой не определена - PullRequest
Новая
       8

Передача объекта из одного класса в другой не определена

0 голосов
/ 21 мая 2018

У меня есть компонент, который отображает список объектов.При щелчке по одному из элементов в этом списке я хотел бы передать объект другому компоненту, который находится на другой странице.

Таким образом, в основном компонент списка -> компонент службы -> компонент подробностей -> отобразитьщелкнув сведения о компоненте списка

Компонент списка: 

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

Класс обслуживания, который я использую для отслеживания текущего объекта 

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

Подробности Компонент, отображающий текущий объект 

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

Детали компонента html 

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

Однако это ничего не отображает.

1 Ответ

0 голосов
/ 21 мая 2018

ngOnInit выполняется, когда ваш компонент инициализирован, и ваш getCurrentMovie() наверняка вернет undefined, поскольку значение еще не установлено.Позже, когда вы устанавливаете значение, ваш getCurrentMovie метод не вызывается, либо вы принудительно вызываете его, либо выбираете Behavior Subject

. Я бы предложил вам перейти на RxJS BehaviorSubject

Вы также можете использовать обычную RxJS Subject услугу, но вот некоторые ее преимущества по сравнению с subject.

  1. Он всегда будет возвращать текущее значение при подписке - нет необходимости вызывать onnext().
  2. . Имеет функцию getValue () для извлечения последнего значения в виде необработанных данных.
  3. Это гарантирует, чтокомпонент всегда получает самые последние данные.
  4. Вы можете получить наблюдаемое от субъекта поведения, используя метод asobservable() для субъекта поведения.
  5. См. это для получения дополнительной информации

ваш сервис 

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

...