为 Angular 4 路由器设置参数

Question

所以我有一个正在构建的 Google All Access 的克隆。

目标是拥有一个 ArtistsComponent >

单击该组件中的艺术家图片 >

路由到特定艺术家的页面，该页面具有 ArtistsPageComponent

组件

这是 ArtistsComponent HTML 和 TS

HTML

<div *ngFor='let x of artistData.artists'
      class="artist">
      <img
        src="{{ x.artistsPicture }}"
        routerLink='artistId' // Where I believe I am going wrong 
        >
        <p>{{ x.artistName }}</p>
</div>

Component.TS

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../data.service';

@Component({
  selector: 'artists',
  templateUrl: './artists.component.html',
  styleUrls: ['./artists.component.css']
})
export class ArtistsComponent {

  constructor(private dataService: DataService) { }

  artistData = this.dataService.data;

  ngOnInit() {
  }

}

这是 ArtistPageComponent

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

@Component({
  selector: 'artistpage',
  templateUrl: './artistpage.component.html',
  styleUrls: ['./artistpage.component.css']
})

export class ArtistPageComponent implements OnInit{

  artistId:string;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ){
    this.route.params.subscribe((params: Params) => {
      console.log(params); 
    })
  }

  ngOnInit(){

  }
}

此外，应用路由模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute} from '@angular/router';

import { LibraryComponent } from './library/library.component';
import { HomeComponent } from './home/home.component';
import { ArtistsComponent } from './library/artists/artists.component';
import { SongsComponent } from './library/songs/songs.component';
import { GenresComponent } from './library/genres/genres.component';
import { PlaylistsComponent } from './library/playlists/playlists.component';
import { StationsComponent } from './library/stations/stations.component';
import { AlbumsComponent } from './library/albums/albums.component';
import { ArtistPageComponent } from './library/artists/artistpage/artistpage.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'library', component: LibraryComponent,
      children: [
        { path: '', redirectTo: 'artists', pathMatch: 'full' },
        { path: 'artists', component: ArtistsComponent },
        { path: 'albums', component: AlbumsComponent },
        { path: 'genres', component: GenresComponent },
        { path: 'playlists', component: PlaylistsComponent },
        { path: 'songs', component: SongsComponent },
        { path: 'stations', component: StationsComponent }
      ]
  },
  {path: 'artists/:artistId', component: ArtistPageComponent }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

不确定将 link/param 放在哪里或在哪里设置每位艺术家的 ID。

JSON 见鬼的数据

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  constructor() { }

  data = {
    "artists": [
      {
        "artistName": "Lupe Fiasco",
        "artistsPicture": "../assets/artists-images/lupe.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "The Cool",
            "artistName": "Lupe Fiasco",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/thecool.jpeg",
            "songs": [
              { "name": "Baba Says Cool for Thought",
                "track number" : "1",
                "file": "mp3" },
              { "name": "Free Chilly ft Sarah Green and GemStones",
                "track number" : "2",
                "file": "mp3" },
              { "name": "Go Go Gadget Flow",
                "track number" : "3",
                "file": "mp3" },
              { "name": "The Coolest",
                "track number" : "4",
                "file": "mp3" },
              { "name": "Superstar ft Matthew Santos",
                "track number" : "5",
                "file": "mp3" },  ..............

Answer 1

我有一个示例应用程序，它与您正在尝试做的很接近。您可以在这里找到它：https://github.com/DeborahK/MovieHunter-routing

您的路由器 link 需要更像这样：

<a [routerLink]="['/movies', movie.id]">{{ movie.title }}</a>

让您的路线与您的路线配置相匹配：

{path: 'artists/:artistId', component: ArtistPageComponent }

routerLink 需要：

[routerLink]="['artists', 'artistId']"

这样它将与您的配置匹配。

为 Angular 4 路由器设置参数

Setting up Params for Angular 4 router

angular

angular-router