为音乐应用程序中的每个艺术家创建新组件（类似于 iTunes、Spotify 等）——Angular4

Question

所以我正在使用 Angular 4.

创建 Google All Access 音乐网络应用的音乐应用克隆

到目前为止，这是我用于 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": "Food & Liquor",
            "artistName": "Lupe Fiasco",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/f&l.jpg",
            "songs": {
              "name": "Kick, Push",
              "file": "mp3"
            },
          },
          { "name": "The Cool",
            "artistName": "Lupe Fiasco",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/thecool.jpeg",
            "songs": {
              "name": "Kick, Push",
              "file": "mp3"
            },

          }
        ]
      },
      {
        "artistName": "Flume",
        "artistsPicture": "../assets/artists-images/flume.jpg",
        "genre": "Electronic",
        "albums": [
          { "name": "Flume",
            "artistName": "Flume",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/flume.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          },
          { "name": "Skin",
            "artistName": "Flume",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/skin.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Linkin Park",
        "artistsPicture": "../assets/artists-images/linkinpark.jpg",
        "genre": "Nu-Metal",
        "albums": [
          { "name": "Hybrid Theory",
            "artistName": "Linkin Park",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/meteora.jpg",
            "songs": [{"name": "Sleepless","file": "mp3"}]
          }
        ]
      },
      {
        "artistName": "Drake",
        "artistsPicture": "../assets/artists-images/drake.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "Views",
            "artistName": "Drake",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/views.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "J.Cole",
        "artistsPicture": "../assets/artists-images/jcole.jpg",
        "genre": "",
        "albums": [
          { "name": "2014 Forest Hills Drive",
            "artistName": "J.Cole",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/fhd.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Eminem",
        "artistsPicture": "../assets/artists-images/eminem.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "Marshal Matthers LP",
            "artistName": "Eminem",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/mmlp.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
    ]
  }


}

这就是我遇到的问题。在 ARTIST 部分，用户显然会点击一个艺术家转到那个特定的艺术家页面，在那里我会显示所有艺术家的专辑、热门歌曲、信息等。

在我的脑海里，天哪，我必须为每个艺术家创建一个新组件吗？ 达斯·维达之声 NNNoooOOOOOOooooOOooooOOO！！！只有6位艺术家，这不是问题。但是，当我考虑可伸缩性时……那一定很糟糕！

那么是否有任何类型的解决方案可以路由到具有被单击的艺术家的信息的组件？

这是我应用中的 AlbumsComponent 的价值：

HTML:

<div class="card" *ngFor='let x of getAlbums'>
  <img src="{{x.albumCover}}" alt="">
  <div class="info">
    <p class="album-name">{{ x.name }}</p>
    <p class="artist-name">{{ x.artistName }}</p>
  </div>
</div>

组件TS:

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

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

  constructor(private dataService: DataService) { }

  artistData = this.dataService.data.artists;

  albums: any[] = [];



 getAlbums = this.artistData.reduce(
   (acc: any, next: any) => {
     next.albums.forEach(album => {
       acc.push(album);
     });
   return acc;
 }, []);

  ngOnInit() {
    console.log(this.getAlbums);

  }

}

直觉上，我正在考虑制作一个 ArtistPageComponent，然后以某种方式根据该 Artist 将数据获取到该组件。

至少让我朝着正确的方向前进的任何帮助都会有所帮助！

Answer 1

在你的app.module.ts作为一条新路线作为

RouterModule.forRoot([
    ........,
    {path: 'artists/:artistId', component: ArtistPageComponent }
])

艺术家-page.component.ts

export class ArtistPageComponent implements onInit{

  artistId:string;

  constructor(private route: ActivatedRoute){
  }

  ngOnInit(){
    this.artistId = this.route.snapshot.params['artistId'];
  }
}

现在您可以添加到 http://app-domain/artists/123 的路由，这将导航到具有 ID 的艺术家组件。

为音乐应用程序中的每个艺术家创建新组件（类似于 iTunes、Spotify 等）——Angular4

Creating new component for each Artist in a Music App (Similar to iTunes, Spotify, ect) -- Angular4

json

audio-player

angular-components

angular