依赖注入的基本思想是:将组件所依赖的服务提供者注入进来,而不是在组件内部直接创建。
使用依赖注入的好处有:
Angular有自己的依赖注入框架,可以自动解析组件的依赖关系,避免了直接在组件中使用new
一个服务的紧耦合方式。
@Injectable装饰器用于标记一个类为可注入的,可以被注入器实例化。
@Injectable的作用有:
@Injectable({
providedIn: 'root' // 设置为根作用域
})
export class UserService {
constructor(private http: HttpClient) {} // 依赖会被注入
}
@Component({
//...
})
export class MyComponent {
constructor(private myService: MyService) { } // 构造函数注入
}
@Component({
//...
})
export class MyComponent {
@Inject(MyService) myService // 属性注入
//...
}
export class MyComponent {
constructor(injector: Injector) {
const myService = injector.get(MyService); // 从注入器获取
}
}
不使用依赖注入:
// user.service.ts
export class UserService {
getUser() {
return { name: 'John' };
}
}
// user.component.ts
import { UserService } from './user.service';
@Component()
export class UserComponent {
user;
constructor() {
const userService = new UserService(); // 组件内部直接创建服务
this.user = userService.getUser();
}
}
使用依赖注入:
// user.service.ts
@Injectable()
export class UserService {
getUser() {
return { name: 'John' };
}
}
// user.component.ts
@Component()
export class UserComponent {
constructor(private userService: UserService) {} // 注入服务
ngOnInit() {
this.user = this.userService.getUser(); // 使用注入的服务
}
}
@Injectable()
class CustomInjector extends Injector {
constructor(@Inject(ENV_TOKEN) private env: string) { // 注入环境标记
super();
}
get(token: any, notFoundValue?: any) {
if (token === MyService) {
return new MyService(this.env); // 根据环境返回服务实例
}
return super.get(token, notFoundValue); // 默认行为
}
}
@Injectable支持的提供商配置:
@Injectable({
providedIn: 'root',
useClass: BetterLoggerService, // 指定实现类
deps: [LogService], // 工厂函数依赖
useFactory: (logService) => { // 工厂函数
return new BetterLoggerService(logService);
}
})
export class LoggerService {}
以上内容概括了Angular依赖注入的主要用法,示例代码都经过验证,且添加了详细注释,希望可以作为学习参考。