IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> angular---依赖注入 -> 正文阅读

[JavaScript知识库]angular---依赖注入

1 通过@Injectable装饰器注入,让引用此模块的使用?

// hero.service.ts
import { Injectable } from '@angular/core';  //导入依赖注入模块
import { HEROES } from './mock-heroes';


@Injectable({
/*
'root':在大多数应用程序中是指应用程序级注入器。

'platform' :页面上所有应用程序共享的平台注入器的特殊单例。

'any':在每个惰性加载的模块中提供一个唯一的实例,而所有急性加载的模块共享一个实例

*/
  providedIn: 'root',  //注入到项目根级,相当于项目所有组件都可使用此服务
})


export class HeroService {
  getHeroes() { return HEROES; }
}

// hero.components.ts  注入方式
import {HeroService} from 'hero.service.ts'
constructor(heroService: HeroService) // 在constructor中引入此服务,则此组件可以使用这个类下的方法与属性

2 通过@NgModule装饰器注入

// app.module.ts
import { DIComponent } from './components/di/di.component';
import {DIComponentService} from './DIComponentService'
@NgModule({
  declarations: [DIComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    DIComponentService, // 1 这是下面一行代码的简写形式,即provide和useClass一致时
    // {provide:DIComponentService,useClass:DIComponentService,
    // 2 使用一个已经定义过的服务,此服务必须在providers中存在
    {provide:DIComponentService,useExisting:DIComponentService},

    //3 useValue,提供一个简单的字符串
     { provide: Logger, useValue: 'simpleValue' },
    //4 useValue,provide为字符串形式,useValue也为字符串形式,此类型注入方式需要加@Inject装饰器,参照注入方式二
    { provide: 'httpApi', useValue: '123.com' }
  ],
  bootstrap: [AppComponent],
})


// hero.component.ts  注入方式一
import {HeroService} from 'hero.service.ts'
constructor(heroService: HeroService) // 在constructor中引入此服务,则此组件可以使用这个类下的方法与属性

// hero.component.ts  注入方式二

class AppComponent {
  constructor(@Inject('httpApi') readonly api){}
}

3 通过@Component装饰器组件内注入,随组件存在而存在

// NgmoduleProvidersComponent.component.ts
import {ComponentInjectService} from './component-inject.service';

@Component({
    selector: 'app-ngmodule-providers',
    templateUrl: './ngmodule-providers.component.html',
    styleUrls: ['./ngmodule-providers.component.less'],
    providers: [ComponentInjectService],   // providers提供的服务在当前组件和子组件都可以使用
    // viewProviders: [ComponentInjectService], // viewProviders提供的服务在当前组件使用
})
export class NgmoduleProvidersComponent implements OnInit {
    
    constructor(private service: ComponentInjectService) {
    }

    ngOnInit() {
    }

}

4 ingectionToken?
?使用场景: ? ?想要用接口(限制值的类型)作为令牌,即提供者
?注意点: ? 需要用@Inject 装饰器注入?

// app.config.ts
import {InjectionToken} from '@angular/core';

interface AppConfig {  // 定义接口
  apiEndpoint: string;
  title: string;
}
//app.config字符串为此接口的描述,可选,会呈现的desc里面
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// app.module.ts
import {APP_CONFIG} from './app.config'
providers: [
  { provide: APP_CONFIG, useValue: 'tokenValue' }
],

// app.component.ts 注入方式
class AppComponent {
  constructor(@Inject(APP_CONFIG) config: AppConfig) {}
}

ngOnInit(){
console.log(this.config)  
}

参考文档:

????????https://www.jianshu.com/p/4b10948d456c?写的很详细?

????????https://angular.cn/guide/dependency-injection-providers? ? ?官网关于injecctToken

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 11:59:24  更:2021-07-26 12:01:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 22:16:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码