使用 Angular 17 进行 GET 请求，该怎么做？

Question

我目前正在学习 Angular CLI，我想从我的服务器获取图像。 我尝试遵循一些教程，但它们没有提供有关正在发生的情况的太多信息，并且大多数都使用名为

app.module.ts

的文件，该文件在最新的 Angular 版本中不可用。

这是我到目前为止所做的一步一步：

1. 设置一个快速服务器，正确提供包含所有图像名称和路径的 JSON 对象。

2. 设置一个新服务以使用 HttpClient 库提供 GET 请求 API，如下所示：

cards.service.ts:

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class CardsService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('http://localhost:3000')
  }
}

3. 设置我的

   cards.component.ts

   以便能够使用服务：

import {Component} from '@angular/core';
import {CardsService} from '../services/cards.service'

@Component({
  selector: 'app-cards',
  standalone: true,
  imports: [],
  templateUrl: './cards.component.html',
  styleUrl: './cards.component.css'
})
export class CardsComponent {
  posts:any;

  constructor(private service:CardsService) {}

  ngOnInit() {
    this.service.getData().subscribe(response => {
        this.posts = response;
      });
  }
}

我真的不知道如何从这里跟进，我想现在使用我的 HTML 文件来正确地从服务器请求图像。

这是我的cards.component.html：

<div class="cards">

  <div class="card">
    <img src="/src/img/card0.png" />
  </div>

  <div class="card">
    <img src="/src/img/card1.png" />
  </div>

</div>

如何使用 API 从服务器获取图像并替换

<img src="/src/img/card0.png" />

以获取来自服务器的正确 GET 请求？

根据我遵循的指南，它对 html 执行以下操作：

<ul class="list-group">
  <li 
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

我不明白上面代码中的API调用在哪里才能在我的项目中正确使用

Answer 1

我不明白你的问题。服务和图像之间没有任何共同点。谈论图像。如果您通过 Angular CLI 创建一个新项目，它将在

assets

文件夹下和

sec

文件夹旁边创建一个

app

文件夹。初始项目的结构应如下所示：

src
+-app
+-assets
angular.json

此外，Angular 还会在应用程序根目录中的

angular.json

文件夹旁边（不在其中！）为您创建

src

文件。这是包含 Angular 项目配置的文件 - 有关更多信息，您可以在here找到。您可以在配置中找到的内容之一是

assets

文件夹的位置。它位于：

projects: {
  images: {
    architect: {
      build: {
        options: {
          assets: [
            "src/favicon.ico",
            "src/assets"
          ]
        }
      }
    }
  }
}

默认情况下，Angular 将指向

assets

文件夹下的

src

文件夹。您可以将任何图像放在那里并在您的应用程序中引用它们。对于您的卡片组件，如果您将图像放在

assets

文件夹中，并且您的应用程序具有以下结构：

src
+-app
| +-card.component.html
| +-card.component.css
| +-cart.component.ts
+-assets
  +-card0.png
  +-card1.png

您可以参考这样的图片：

<div class="cards">

  <div class="card">
    <img src="../assets/card0.png" />
  </div>

  <div class="card">
    <img src="../assets/card1.png" />
  </div>

</div>