1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Angular学习笔记03——依赖注入

Angular学习笔记03——依赖注入

时间:2024-08-25 10:41:50

相关推荐

Angular学习笔记03——依赖注入

##依赖注入 依赖注入:Dependency Injection(DI)

控制反转:Inversion of Control(IOC)

优点:松耦合,提高代码可复用性,提高可测试性

实现方式:

@NgModule({providers:[ProductService]//提供器//声明需要依赖注入的对象//等同于providers:[{provide:ProductService,useClass:ProductService}]//等同于providers:[{provide:ProductService,useClass:AnotherProductService}]省略其他配置})export classAppModule{}@Component({...省略组件配置})export class ProductComponent{product: Product;//构造方法实现依赖注入constructor(productService: ProductService){//注入器this.product = productService.getProduct();}}复制代码

####注入器constructor(productService: ProductService){}####提供器providers:[ProductService]

providers:[{provide:ProductService,useClass:ProductService}]

providers:[{provide:ProductService,useClass:AnotherProductService}]

providers:[{provide:ProductService,useFactory:() =>{...}]###提供器作用域 1、若提供器声明在app模块中,则对所有组件课件

2、若提供器声明在组件中时,则只对声明它的组件及其子组件可见

3、若声明在模块中的提供器和声明在组件中的提供器的token一致的时候,组件中的提供器会覆盖模块中的提供器

4、优先在模块中声明

###@Injectable()装饰器 该注解装饰器表明被注解的这个类是否可以依赖注入其他类

###工厂提供器的使用 代码示例:

imports: [BrowserModule],providers: [{provide: ProductService,useFactory: (logger: LoggerService, myvalue) => {// // tslint:disable-next-line:prefer-const// let logger = new LoggerService();// // tslint:disable-next-line:prefer-const// let dev = Math.random() > 0.5;// if (dev) {//return new ProductService(logger);// } else {//return new AnotherProductService(logger);// }if (myvalue.abc) {return new ProductService(logger);} else {return new AnotherProductService(logger);}}, deps: [LoggerService, 'MY_VALUE']}, LoggerService,{provide: 'MY_VALUE', useValue: { abc: true }}],bootstrap: [AppComponent]})export class AppModule { }复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。