Question

我正在构建Angular Movie DB，正在使用的两个组件是“搜索电影”组件和“单视图”组件。 “搜索电影”组件显示电影列表，“单视图”组件显示给定电影的更多详细信息。

我希望这样做，以便当我从“搜索电影”组件中的列表中单击电影时，页面会呈现该电影的“单视图”组件。

我设法进行了设置，以便直接从URL导航到带有电影ID（即/ movie / tt4425200）的“单视图”路径，并通过其ID正确加载该电影的信息，因此一切都正确设置了。

我似乎无法在“搜索电影”组件中关联电影的点击，然后成功导航到正确的“单视图”路径。因此，使用上面的示例，单击相关电影会加载URL路径为/ movie / tt4425200的“单视图”组件。

我确定这是使用@Input在两个组件之间进行通信的情况，但我只是想不通。

search-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);
    });
  }
}

search-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>

single-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;
    });
  }

}

single-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>

Answer 1

您似乎已完成所有设置，只需单击电影即可导航到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？

Answer 2

在您的UL-> LI中，添加routerLink属性并将电影ID传递为第二个参数

[routerLink] =“ ['/ movie /，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>

如何使用Angular Routing配置<li>项目，以便在新视图中显示相关详细信息？

2 个答案: