如何使单个组件具有与链接路径(角)相同的图像

Question

首先，我已经将我的字符列表设置为每个名称都有一个图像循环，在我的资产中，我有图像1,2,3，直到10.jpg。

我是这样为名单做的：

import { Component, OnInit } from '@angular/core';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-list',
  template: `
    <section class="section">
      <div class="container">
        <div class="columns is-multiline" *ngIf="actors">
          <div class="column is-4" *ngFor="let actor of actors; let i = index">
            <div class="card">
              <div class="card-content">
                <a [routerLink]="'' + (i+1)" >{{ actor.name }}</a>
                <figure class="image is-4by3 mt-6">
                  <img src="./assets/img/{{ i + 1 }}.jpg"  alt="">
                </figure>
                <p><br>Height : {{ actor.height }}</p>
                <p>Birth Year : {{ actor.birth_year }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorListComponent implements OnInit {
  actors;

  constructor(private actorService: ActorService) { }

  async ngOnInit() {
    this.actors = await this.actorService.getActors()
    console.log(this.actors)
  }

}

但在单曲中，如果我们点击第一个前演员。卢克天行者，我想成为一个形象，只有一个出现，等等。这是为演员-单一的组成部分。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-single',
  template: `
    <section class="section">
      <div class="container">
        <div class="card" *ngIf="actor">
          <section class="hero is-info">
            <div class="hero-body">
              <h1 class="title is-1 ml-4 mb-6">{{ actor.name }}</h1>
            </div>
          </section>

            
          <div class="message-body" *ngFor=" let i = index">
              <figure class="image is-4by3 mt-6">
                <img src="./assets/img/'{{ i + 1 }}.jpg"  alt="">
              </figure>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Height : {{ actor.height }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Mass : {{ actor.mass }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Hair Color : {{ actor.hair_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Skin Color : {{ actor.skin_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Eye Color : {{ actor.eye_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Birth Year : {{ actor.birth_year }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Gender : {{ actor.gender }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Created : {{ actor.created }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Edited : {{ actor.edited }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Url : {{ actor.url }}</h2>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorSingleComponent implements OnInit {
actor;
  constructor( private actorService: ActorService, private route: ActivatedRoute) { }

  ngOnInit(): void {

    this.route.params.subscribe(async params => {
      const actorname = params['actorname'];
      this.actor = await this.actorService.getActor(actorname)
      console.log(this.actor)
    });
  }
}

Answer 1

也许不是你想要的，但有个主意：

你能把你的档案命名为演员的名字吗？

如果是的话，你可以这样用它

<div class="message-body">
  <figure class="image is-4by3 mt-6">
    <img [src]="'./assets/img/' + actor.name + '.jpg'" alt="" />
  </figure>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Height : {{ actor.height }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Mass : {{ actor.mass }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Hair Color : {{ actor.hair_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Skin Color : {{ actor.skin_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Eye Color : {{ actor.eye_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Birth Year : {{ actor.birth_year }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Gender : {{ actor.gender }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Created : {{ actor.created }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Edited : {{ actor.edited }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Url : {{ actor.url }}</h2>
</div>

另一个提示:请注意我是如何在角世界中使用[src]="..."的，这是在html属性中使用{{ }}的一个错误实践。

瓦利亚