首頁 > web前端 > js教程 > 如何在 Angular 2 中的元件之外注入服務?

如何在 Angular 2 中的元件之外注入服務?

Patricia Arquette
發布: 2024-11-26 05:25:13
原創
801 人瀏覽過

How to Inject Services Outside of Components in Angular 2?

Angular 2 中的依賴注入:在組件之外注入服務

在Angular 2 中,使用@Component 裝飾器將服務注入到組件中非常簡單。但是,在某些情況下,您可能需要在元件外部注入服務。本文探討如何使用依賴注入 (DI) 來實現此目的。

可注入服務

要為服務啟用 DI,必須使用 @Injectable 裝飾器進行裝飾。此裝飾器將類別標記為可注入,允許注入其參數。請注意,「Injectable」這個名稱有點誤導,因為它不會使類別可注入,而是使其可注入,因為它的參數可以被注入。

依賴注入機制

Angular 2 使用分層的注入器系統,每個層級對應一個特定的組件或一組組件。當 DI 系統遇到依賴項時,它會先尋找目前的注入器。如果未找到依賴項,它將向上移動注入器層次結構,直到找到依賴項的提供者。

跨注入器注入服務

將一個服務注入另一個服務服務,只需在依賴服務的構造函數中定義依賴關係,並將@Injectable 裝飾器添加到依賴服務即可。

對於範例:

@Injectable()
export class MyFirstSvc {
  // ...
}

@Injectable()
export class MySecondSvc {
  constructor(private myFirstSvc: MyFirstSvc) {
    // ...
  }
}
登入後複製

在此範例中,MySecondSvc 依賴 MyFirstSvc,並且可以注入到 MyFirstSvc 可用的任何注入器中。

定義提供者

要指定服務的提供者,請在 @Component 或 NgModule 裝飾器中使用提供者陣列。例如,如果您想將MyFirstSvc 定義為應用程式註入器中的提供者,您可以如下進行操作:

@Component({
  // ...
  providers: [MyFirstSvc]
})
export class AppComponent {
  // ...
}
登入後複製

結論

透過理解層次結構由於注入器和@Injectable 裝飾器的本質,您可以在Angular 2 中的元件外部有效地註入服務。這使您可以創建模組化且可重複使用的服務在您的應用程式中輕鬆注入和共享。

以上是如何在 Angular 2 中的元件之外注入服務?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板