幻空博客

外观

生命周期

复制页面

约 121 字小于 1 分钟

2026-09-17

具体详见 Angular 生命周期 文档。

import { HttpClient } from '@angular/common/http'
import { Component, inject, type OnInit, signal } from '@angular/core'

interface AdviceSlip {
  slip: {
    id: number
    advice: string
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})
//               ↓ 我们需要继承 OnInit 接口, 并实现 ngOnInit 方法
export class App implements OnInit {
  private http = inject(HttpClient)
  loading = signal(false)
  advice = signal<string>('')

  // ↓ ngOnInit 生命周期钩子函数, 组件初始化时会调用
  ngOnInit() {
    this.getAdvice()
  }

  getAdvice() {
    this.loading.set(true)

    this.http
      .get<AdviceSlip>(`https://api.adviceslip.com/advice?${Math.random()}`)
      .subscribe((res) => {
        this.advice.set(res.slip.advice)
        this.loading.set(false)
      })
  }
}