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

Question

我正在构建一个 Angular 电影数据库，我正在使用的两个组件是 "search-movie" 组件和 "single-view" 组件。 "search-movie" 组件显示电影列表，"single-view" 组件显示给定电影的更多详细信息。

我希望这样当我从 "search-movie" 组件的列表中单击电影时，页面会呈现该电影的 "single-view" 组件。

我已经设法设置它，以便直接从 URL 导航到带有电影 ID（即 /movie/tt4425200）的 "single-view" 路径，正确加载信息那部电影的 ID，所以设置正确。

我似乎无法连接 "search-movie" 组件中的电影点击，然后成功导航到正确的 "single-view" 路径。因此，使用上面的示例，单击相关电影会加载具有 URL 路径 /movie/tt4425200.

的 "single-view" 组件

我确定这是使用@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>

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 路由配置我的 <li> 项目，以便它在新视图中显示相关详细信息？

How can I configure my <li> items with Angular Routing so that it shows the relevant details in a new view?

javascript

angular-routing

angular