Angular中按钮点击调用函数加载JSON数据、保存URL及控制台打印问题

1. 修改模板代码 #

直接移除<a>标签，给按钮绑定点击事件，避免默认跳转行为：

<button (click)="loadData()">Click</button>

2. 编写组件逻辑 #

在你的组件.ts文件中完成以下操作：

• 导入Angular的HttpClient服务（用于发起HTTP请求）
• 定义变量存储目标URL
• 注入HttpClient服务
• 实现loadData函数，完成数据请求、URL存储和控制台打印

示例代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html', // 替换成你的组件模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 存储目标URL的变量
  targetUrl = 'https://api.github.com/search/users?q=type%3Auser';

  // 构造函数注入HttpClient
  constructor(private http: HttpClient) { }

  loadData() {
    // 打印存储的URL
    console.log('目标URL:', this.targetUrl);
    
    // 发起HTTP请求获取JSON数据
    this.http.get(this.targetUrl).subscribe({
      next: (responseData) => {
        // 请求成功时打印返回的JSON数据
        console.log('返回的JSON数据:', responseData);
      },
      error: (err) => {
        // 请求失败时打印错误信息
        console.error('请求出错:', err);
      }
    });
  }
}

3. 配置模块依赖 #

在根模块（比如AppModule）中导入HttpClientModule，否则HttpClient无法正常使用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入模块

import { AppComponent } from './app.component';
import { YourComponentComponent } from './your-component/your-component.component'; // 替换成你的组件路径

@NgModule({
  declarations: [
    AppComponent,
    YourComponentComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 添加到依赖数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

完成上述操作后，点击按钮就会执行loadData函数：将URL存入变量、发起请求获取JSON数据，并在控制台打印相关内容，不会触发页面跳转。

内容的提问来源于stack exchange，提问作者Hen Ma