angular - @从“参数”组件输入数据；没有用于属性绑定的选择器标记

Question

所以我在这里有点吃不消。

我有一个 ArtistsComponent，它显示了一群音乐艺术家。当你点击一个 img 时，它会路由到一个 ArtistPageComponent：

此外，这里也是组件的路径

{ path: 'artists', component: ArtistsComponent },

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

艺术家

HTML

<div *ngFor='let x of artistData.artists'
      class="artist">
      <img
        src="{{ x.artistsPicture }}"
        [routerLink]="['/artists', 'artistId']"
        >
        <p>{{ x.artistName }}</p>
</div>

组件.Ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../data.service';
import { ActivatedRoute, Params, Router, ActivatedRouteSnapshot } from '@angular/router';

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

  constructor(
      private dataService: DataService,
      private route: ActivatedRoute
  ) { }

  artistData = this.dataService.data;

  ngOnInit() {
    console.log(this.route);
  }

}

这是 ArtistPageComponent 代码：

ARTISTPAGE

HTML

<p>
  {{ artistId }}
</p>

组件.Ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Params, Router, ActivatedRouteSnapshot } from '@angular/router';
import { DataService } from './../../../data.service';

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

export class ArtistPageComponent implements OnInit{

  @Input(): artist = '';

  artistId:string = '';
  artistData = this.dataService.data;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private dataService: DataService
  ){  }

  ngOnInit(){
    this.artistId = this.route.snapshot.params.artistId;
    console.log(this.route);
    console.log(this.artistData.artists)
  }
}

如果没有组件选择器，我真的不知道如何为输入绑定属性。所以我在想，一旦你点击一个img，获取与该艺术家关联的数据并将其输入ArtistPageComponent。如果这是正确的方法，我只是不知道如何执行它。

对于它的价值，这里是数据服务的一部分。

"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" },
              { "name": "Paris, Tokyo",
                "track number" : "6",
                "file": "mp3" },
              { "name": "Hi-Definition ft Snoop Dogg and Pooh Bear",
                "track number" : "7",
                "file": "mp3" },
              { "name": "Gold Watch",
                "track number" : "8",
                "file": "mp3" },
              { "name": "Hip-Hop Saved My Life ft Nikki Jean",
                "track number" : "9",
                "file": "mp3" },
              { "name": "Intruder Alert ft Sarah Green",
                "track number" : "10",
                "file": "mp3" },
              { "name": "Streets on Fire ft Matthew Santos",
                "track number" : "11",
                "file": "mp3" },
              { "name": "Little Weapon ft Bishop G and Nikki Jean",
                "track number" : "12",
                "file": "mp3" },
              { "name": "Gotta Eat",
                "track number" : "13",
                "file": "mp3" },
              { "name": "Dumb It Down ft GemStones and Graham Burris",
                "track number" : "14",
                "file": "mp3" },
              { "name": "Hello / Goodbye (Uncool) ft Unkle",
                "track number" : "15",
                "file": "mp3" },
              { "name": "The Die ft GemStones",
                "track number" : "16",
                "file": "mp3" },
              { "name": "Put You on Game",
                "track number" : "17",
                "file": "mp3" },
              { "name": "Fighters ft Matthew Santos",
                "track number" : "18",
                "file": "mp3" },
              { "name": "Go Baby ft GemStones",
                "track number" : "19",
                "file": "mp3" },
            ]
          },
          { "name": "Food & Liquor",
            "artistName": "Lupe Fiasco",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/f&l.jpg",
            "songs": [
              { "name": "Intro",
                "track number" : "1",
                "file": "mp3"
              },
              { "name": "Real ft Sarah Green",
                "track number" : "2",
                "file": "mp3"
              },
              { "name": "Just Might Be O.K. ft Gemini",
                "track number" : "3",
                "file": "mp3"
              },...............