распределить объект с помощью сервиса через роутер в angular2 - PullRequest
Новая
       14

распределить объект с помощью сервиса через роутер в angular2

0 голосов
/ 31 января 2019

У меня три компонента и один сервис.компоненты (компонент приложения, домашний компонент, компонент детализации фильма).с помощью маршрутизаторов загружаю домашний компонент в компонент приложения.в home-компоненте рендеринг массива объектов фильма в него с помощью службы (где я получаю массив с использованием HTTP).теперь, когда кто-то нажимает на один объект фильма в домашнем компоненте.Я передаю этот конкретный объект в функцию.и я хочу визуализировать этот конкретный объект в компонент moviedetail с помощью маршрутизатора навигации, не используя директиву детализации фильма.здесь я использую сервис для передачи данных от домашнего компонента к компоненту детализации фильма.

когда я использую директиву moviedetial в homecomponent, я могу визуализировать конкретный объект.но я не в состоянии сделать это, используя службу в качестве моста между двумя компонентами.Я хочу перейти к компоненту moviedetial только с помощью навигатора роутера, потому что я не хочу показывать детали фильма на домашней странице.

home-component.html 

<ul>
    <li *ngFor="let movie of movies">{{movie.name}}-{{movie-storyline}}
        <button (click)="senddatatoservice(movie)"></button>
    </li>
<ul>

home-component.ts 

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared-serive';
import { Router } from '@angular/router';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

  constructor(private _sharedservice:SharedService, private _router:Router) { }

  ngOnInit() {
  }

  senddatatoservice(movie){
    this._sharedservice.getdata(movie);
    this._router.navigate(["/moviedetails"]);
  }

}

shared.service 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MovieService {

  private passdata = new Subject<any>();
  obpassdata = this.passdata.asObservable();            
  constructor(private _http:Http) { }

  getdata(data){
    this.passdata.next(data);
  }

}

детали фильма.component.ts 

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared-serive';

@Component({
  selector: 'app-movie-details',
  templateUrl: './movie-details.component.html',
  styleUrls: ['./movie-details.component.css']
})
export class MovieDetailsComponent implements OnInit {

    singlemovie:any;
  constructor(private _sharedservice:SharedService) { }

  ngOnInit() {
    this._sharedservice.getdata().subscribe((Response)=>{
        this.singlemovie = Response;
    })
  }


}
...