Angular如何将API Get请求响应存入变量并在组件中引用

1. 修正服务类 #

服务类不需要ngOnInit（这是组件专属的生命周期钩子），应封装获取数据的方法供组件调用，同时遵循TypeScript类名首字母大写的规范：

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

@Injectable({
  providedIn: 'root'
})
export class SqlService {
  constructor(private http: HttpClient) { }

  // 封装获取服务器数据的方法
  fetchName(): Observable<any> {
    return this.http.get('http://localhost:7271/sql');
  }
}

2. 在AppComponent中注入服务并赋值变量 #

组件中通过依赖注入获取服务实例，在ngOnInit钩子中发起请求，将响应结果赋值给repeat变量：

import { Component, OnInit } from '@angular/core';
import { SqlService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'angulartest';
  repeat: string | any; // 可根据接口返回值定义具体类型，比如string

  // 构造函数中注入服务（Angular自动完成实例化）
  constructor(private sqlService: SqlService) { }

  ngOnInit(): void {
    // 订阅Observable，触发HTTP请求并处理响应
    this.sqlService.fetchName().subscribe(response => {
      // 根据接口返回结构调整，若直接返回字符串则直接赋值this.repeat = response
      this.repeat = response.name;
    });
  }
}

3. 在HTML模板中使用变量 #

通过插值表达式直接使用变量，也可加判断避免初始空值显示：

<!-- 直接显示变量 -->
<p>获取到的名称：{{ repeat }}</p>

<!-- 或添加判断，未加载完成时不显示 -->
<p *ngIf="repeat">获取到的名称：{{ repeat }}</p>

关键概念说明 #

• 依赖注入：在组件构造函数中声明private sqlService: SqlService，Angular会自动创建服务实例并注入，这是Angular核心的面向对象用法，实现组件与服务的解耦。
• Observable订阅：HttpClient的get方法返回Observable对象，必须调用subscribe才会触发实际请求，在回调函数中处理响应并赋值给组件变量。
• 生命周期钩子：ngOnInit是组件初始化完成后执行的钩子，适合在这里发起HTTP请求，避免在构造函数中处理异步操作。

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