依赖注入

约 215 字小于 1 分钟

2026-09-17

这和 laravel 类似的依赖注入容器类似, 也是创建一个 Service 类, 然后在 Component 中注入使用。

/src/app/advice-store.ts

import { HttpClient } from '@angular/common/http'
import { inject, Service, signal } from '@angular/core'

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

@Service()
export class AdviceStore {
  private http = inject(HttpClient)
  isLoading = signal(false)
  advice = signal<string>('')

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

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

/src/app/app.ts

import { Component, inject, type OnInit } from '@angular/core'
import { AdviceStore } from './advice-store.js'

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})
export class App implements OnInit {
  adviceStore = inject(AdviceStore)
  advice = this.adviceStore.advice
  isLoading = this.adviceStore.isLoading

  ngOnInit() {
    this.adviceStore.getAdvice()
  }
}

/src/app/app.html

@if (advice().length === 0 && !isLoading()) {
<p>Press the button to get some advice.</p>
}@else {
<p>{{isLoading() ? 'Loading...' : advice()}}</p>
}

<button [disabled]="isLoading()" (click)="adviceStore.getAdvice()">Get Advice</button>

你可能觉得这很麻烦，但是他提供了一大特点，他可以天然的跨组件，可以在几个组件中共享状态，也就类似实现了 pinia 的功能。