Как я могу настроить мои <li>элементы с угловой маршрутизацией, чтобы она отображала соответствующие детали в новом виде? - PullRequest
Новая
       19

Как я могу настроить мои <li>элементы с угловой маршрутизацией, чтобы она отображала соответствующие детали в новом виде?

0 голосов
/ 11 июля 2019

Я создаю Angular Movie DB, двумя компонентами, с которыми я работаю, являются компонент "search-movie" и компонент "single-view". Компонент «search-movie» отображает список фильмов, а компонент «single-view» показывает дополнительную информацию о данном фильме.

Мне бы хотелось, чтобы при нажатии на фильм из списка в компоненте "search-movie" на странице отображался компонент "один просмотр" для этого фильма.

Мне удалось настроить это так, чтобы при переходе к пути «одиночного просмотра» с идентификатором фильма (т.е. / movie / tt4425200) непосредственно из URL-адреса правильно загружалась информация для этого фильма по его идентификатору, поэтому это все правильно настроено.

Я просто не могу связать щелчок фильма в компоненте "search-movie", чтобы затем успешно перейти к правильному пути "одиночного просмотра". Таким образом, используя приведенный выше пример, нажатие на соответствующий фильм загружает компонент «одного просмотра» с URL-путем /movie/tt4425200.

.

Я уверен, что это случай использования @Input для связи между двумя компонентами, но я просто не могу понять это.

Поиск-movie.component.ts: 

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

import { DataService } from '../data.service';

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

  searchControl = new FormControl('');
  movieResults: any = [];

  constructor(private data: DataService) { }

  ngOnInit() {}

  /* GET request */
  getData(event) {
    const film = event.target.value;
    this.data.searchFilm(film)
    .subscribe( (res) => {
      res = this.movieResults = res;
      console.log(res);
    });
  }
}

Поиск-movie.component.html: 

<div class="container">
    <h1 class="is-size-3">Find your favorite movies...</h1>
    <form (ngSubmit)="onSubmit()">
        <input 
            type="text" 
            (keyup)="getData($event)" 
            placeholder="Start typing..." 
            [formControl]="searchControl" />
    </form>
    {{searchControl.value}}
</div>

<div class="container">
    <ul>
        <li id="list-item" *ngFor="let x of movieResults; let i = index;">
            <img [src]="x.Poster" onerror="this.src='../assets/images/default-poster.jpg'">
            <p id="movie-title" class="is-size-5">{{x.Title}} ({{x.Year}}) </p>
        </li>
    </ul>
</div>

Однополочный view.component.ts: 

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { DataService } from '../data.service';

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

  singleDetails: any = {};

  constructor(
    private data: DataService,
    private route: ActivatedRoute) { }

  ngOnInit() {
    /** GENERATE FILM DETAILS BY movie/id where id is the imdbID */
    const id = this.route.snapshot.paramMap.get('id');
    this.data.moviebyID(id)
    .subscribe( (res) => {
      res = this.singleDetails = res;
    });
  }

}

одного view.component.html: 

<div class="container singleDisplayContainer">
    <div class="columns is-mobile">
        <div class="column" id="poster-column">
            <img id="poster" [src]="singleDetails.Poster" [alt]="singleDetails.Title" onerror="this.src='../assets/images/default-poster.jpg'">
        </div>
        <div id="info-column" class="column">
            <div class="columns">
                <div class="column is-three-fifths">
                    <h1 class="is-size-3">{{singleDetails.Title}} <span class="is-size-4">({{singleDetails.Year}})</span> </h1>
                    <p style="font-size: 14px"> {{singleDetails.Rated}} | {{singleDetails.Runtime}} | {{singleDetails.Genre}} | {{singleDetails.Released}} </p>
                </div>
                <div class="column">
                    <div class="columns">
                        <div class="column is-one-third">
                            <img id="star-rating" width="50px" src="../../assets/images/star-rating.png" alt="{{singleDetails.Title}}">
                        </div>
                        <div class="column">
                            <p style="font-size: 2em"> {{singleDetails.imdbRating}}<span style="font-size: 12px">/10</span></p>
                            <p>{{singleDetails.imdbVotes}}</p>
                        </div>
                    </div>
                </div>
            </div>

            <br>
            <p>Plot: {{singleDetails.Plot}} </p>
            <br>
            <p>Directed by: {{singleDetails.Director}} </p>
            <br>
            <p>Writers: {{singleDetails.Writer}} </p>
            <br>
            <p>Actors: {{singleDetails.Actors}} </p>
            <br>
            <p onerror="this.style.display='none'">Box office: {{singleDetails.BoxOffice}} </p>
        </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

В Your UL -> LI добавьте свойство routerLink и передайте идентификатор фильма в качестве второго параметра

[routerLink] = "[" / фильм /, x.movieId]"> 

<ul>
   <li id="list-item" *ngFor="let x of movieResults; let i = index;" [routerLink]="['/movie/,x.movieId]">
    <img [src]="x.Poster" onerror="this.src='../assets/images/default-poster.jpg'">
    <p 
    id="movie-title" 
    class="is-size-5">{{x.Title}} ({{x.Year}}) </p>
  </li>
</ul>
0 голосов
/ 11 июля 2019

Похоже, у вас все настроено, все, что вам нужно сделать, это перейти к single-view по клику фильма.

search-movie.component.ts

showDetails(id : string) {
    this.router.navigate(['movie',{ id }]);
}

search-movie.component.html

<!-- in showDetails you will pass id of the current movie while looping -->
<li id="list-item" *ngFor="let x of movieResults; let i = index;" (click)="showDetails(x.id)">
    <img 
    [src]="x.Poster" 
    onerror="this.src='../assets/images/default-poster.jpg'"
    >
    <p 
    id="movie-title" 
    class="is-size-5">{{x.Title}} ({{x.Year}}) </p>
 </li>

Это перейдет на страницу single-view. это то, что вы хотите, верно? или вам нужно загрузить single-view на той же странице, что и список?

...