網站首頁 編程語言 正文
下面是在 NgModule 中注冊一個 service 的典型例子。
import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';
@NgModule({
providers: [AuthService],
})
class ExampleModule {}
上面的代碼,因為 provide 和 useClass 屬性值都相同,所以其實是簡寫形式(shorthand
),完整的寫法:
import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';
@NgModule({
providers: [
{
provide: AuthService,
useClass: AuthService,
},
],
})
class ExampleModule {}
對象中的 provide 屬性是我們正在注冊的提供者的令牌。 這意味著 Angular 可以使用 useClass 值查找 AuthService 令牌下存儲的內容。
Angular 依賴注入為應用程序開發提供了許多好處。 首先,我們現在可以擁有兩個具有完全相同類名的 providers,Angular 在解析正確的服務時不會有任何問題。 其次,我們還可以使用不同的提供者覆蓋現有提供者,同時保持令牌相同。
原始的 AuthService 類的實現:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class AuthService {
constructor(private http: Http) {}
authenticateUser(username: string, password: string): Observable<boolean> {
// returns true or false
return this.http.post('/api/auth', { username, password });
}
getUsername(): Observable<string> {
return this.http.post('/api/user');
}
}
在 LoginComponent 里消費上述 Service 類的代碼:
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'auth-login',
template: `
<button>
Login
</button>
`
})
export class LoginComponent {
constructor(private authService: AuthService) {}
login() {
this.authService
.authenticateUser('toddmotto', 'straightouttacompton')
.subscribe((status: boolean) => {
// do something if the user has logged in
});
}
}
在 UserInfoComponent 里使用這個 Service class:
@Component({
selector: 'user-info',
template: `
<div>
You are {{ username }}!
</div>
`
})
class UserInfoComponent implements OnInit {
username: string;
constructor(private authService: AuthService) {}
ngOnInit() {
this.authService
.getUsername()
.subscribe((username: string) => this.username = username);
}
}
把兩個 Component Class 和一個 Service class 封裝到一個 NgModule 里:
import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
import { UserInfoComponent } from './user-info.component';
@NgModule({
declarations: [LoginComponent, UserInfoComponent],
providers: [AuthService],
})
export class AuthModule {}
也可能存在其他組件使用相同的 AuthService。 現在假設有一個新的需求,需要將我們的登錄身份驗證方式,更改為一個使用 Facebook 登錄用戶的庫。
最笨的辦法是遍歷每一個組件實現,并更改所有導入以指向這個新的提供者,但是我們可以利用依賴注入,輕松覆蓋我們的 AuthService 以使用 FacebookAuthService:
import { NgModule } from '@angular/core';
// totally made up
import { FacebookAuthService } from '@facebook/angular';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
import { UserInfoComponent } from './user-info.component';
@NgModule({
declarations: [LoginComponent, UserInfoComponent],
providers: [
{
provide: AuthService,
useClass: FacebookAuthService,
},
],
})
export class AuthModule {}
上面的例子用不同的值替換了 useClass 屬性。 這樣,我們可以在我們的應用程序中的任何地方使用 AuthService - 而無需進行進一步的更改。
這是因為 Angular 使用 AuthService 作為令牌來搜索我們的提供者。 由于我們已將其替換為新類 FacebookAuthService,因此我們所有的組件都將使用它。
原文鏈接:https://blog.csdn.net/i042416/article/details/125858315
相關推薦
- 2022-08-12 python利用scatter繪畫散點圖_python
- 2022-09-30 Python學習之pip包管理工具的使用_python
- 2023-01-23 React中props使用介紹_React
- 2023-02-15 go性能分析工具pprof的用途及使用詳解_Golang
- 2021-10-13 linux環境下恢復rm誤刪的文件方法_Linux
- 2022-09-30 C#?wpf?Grid中實現控件拖動調整大小的示例代碼_C#教程
- 2022-04-26 使用jquery庫實現電梯導航效果_jquery
- 2024-04-02 Springboot 切換Log4j2日志
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支