Question

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

目标是让ArtistsComponent＆gt;

点击该组件中的艺术家图片＆gt;

路由到特定艺术家的页面，该页面包含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 { }

不确定在何处放置链接/参数或在何处为每位艺术家设置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

您的路由器链接需要看起来更像这样：

make_tuple()

使您的路线符合路线配置：

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

routerLink需要是：

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

这样它就会与你的配置相匹配。

为Angular 4路由器设置Params

1 个答案: