For example we have a component:

class TodoList {
private todos: Todo[] = []; add(todo: Todo) {} remove(todo: Todo) {} set(todo: Todo, index: number) {} get(index: number) {} getAll() {}
} @Component({
// ...
viewProviders: [TodoList]
// ...
})
class TodoAppComponent {
constructor(private todos: TodoList) {}
// ...
}

For TodoAppComponent, we make 'TodoList' as 'viewProviders'.

And inside TodoAppComponent, we have TodoInputComponent & TodoComponent as view children, and AppFooterComponent as content child:

@Component({
selector: 'todo-app',
template: `
<section>
Add todo:
<todo-input (todo)="addTodo($event)"></todo-input>
</section>
<section>
<h4 *ngIf="todos.getAll().length">Todo list</h4>
<todo *ngFor="let todo of todos.getAll()" [todo]="todo">
</todo>
</section>
<ng-content select="app-footer"></ng-content>
`
})

So now, if we want to inject TodoList into TodoInputComponent and TodoComponent, that's fine. But once we try to inject TodoList service into FooterComponent, it will show the error:

ORIGINAL EXCEPTION: No provider for TodoList!

This is because when we use 'viewProviders' we can only inject service into component and its view children. Content Children (passed in by ng-content) cannot be injected.

When to use viewProviders?

Why would I use viewProviders, if such providers are not accessible by the content children of the component? Suppose you’re developing a third-part library, which internally uses some services. These services are part of the private API of the library and you don’t want to expose them to the users. If such private dependencies are registered with providers and the user passes content children to any of the components exported by the public API of your library, she will get access to them. However, if you use viewProviders, the providers will not be accessible from the outside.

[Angular] Difference between Providers and ViewProviders的更多相关文章

  1. [Angular 2] Value Providers & @Inject

    Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really ...

  2. [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2

    Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand s ...

  3. [Angular] Pipes as providers

    In this example, we are going to see how to use Pipe as providers inject into component. We have the ...

  4. [Angular] Difference between ngAfterViewInit and ngAfterContentInit

    Content is what is passed as children. View is the template of the current component. The view is in ...

  5. [Angular] Difference between ViewChild and ContentChild

    *The children element which are located inside of its template of a component are called *view child ...

  6. 理论+案例,带你掌握Angular依赖注入模式的应用

    摘要:介绍了Angular中依赖注入是如何查找依赖,如何配置提供商,如何用限定和过滤作用的装饰器拿到想要的实例,进一步通过N个案例分析如何结合依赖注入的知识点来解决开发编程中会遇到的问题. 本文分享自 ...

  7. Angular CurrencyPipe货币管道关于人民币符号¥的问题

    做项目(Angular项目)时经常需要处理金额的显示,需要在金额前面加上¥,但又不想用简单在前面加"¥"这么不优雅的方式,于是想到了CurrencyPipe.毕竟,Currency ...

  8. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  9. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

随机推荐

  1. tomcat的一些简单配置

    一.管理tomcatusernamepassword conf文件夹下,tomcat-users.xml <span style="font-size:24px;">& ...

  2. do_pj--下拉代码脚本的使用

    接本目录 /home/zhangshuli/git2/vanzo_team/xulei/Platform.py 在~/bin目录下链接 ln -sf ~/git2/vanzo_team/xulei/P ...

  3. 【hihocoder 1564】同步H公司的终端

    [链接]http://hihocoder.com/problemset/problem/1564 [题意] 在这里写题意 [题解] 如下图 (上图中节点旁边的红色数字为它的权值) 从叶子节点开始考虑. ...

  4. C++组合数(combination)的实现

    实现: (nm) 既需要计算组合的总数 (32)=3: 也需要分别获得每一种组合的情形,用于穷举搜索: 1, 2; 1, 3; 2, 3 1. 递归实现 // picked + toPick == m ...

  5. sql基础知识集锦

    Sql常用语法 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT ...

  6. [Angular] Two ways to create Angular Animation, using animation() or using state()

    We have two blocks to show to difference ways to do animation in Angular: <button (click)="t ...

  7. Eclipse 出错 Error:Could not create the Java Virtual Machine Error:A fatal exception has occurred

    提示如下: scala compile server. error:could not create the java machine.Error: A fatal exception has occ ...

  8. java学习笔记之基础语法(二)

    1.数组: 概念:同一种类型数据的集合,其实,数组就是一个容器 优点:可以方便的对其进行操作,编号从0开始,方便操作这些元素. 2,数组的格式 元素类型[]数组名=new 元素类型[数组元素个数]: ...

  9. RISC-V工具链环境(基于Debian/Linux操作系统)

    RISC-V工具链环境(基于Debian/Linux操作系统) 提要 Debian/Linux虚拟机导入 启动虚拟机 SiFive/Nuclei SDK运行指南 Debian/Linux虚拟机存储位置 ...

  10. 手动脱KBys Packer(0.28)壳实战

    作者:Fly2015 吾爱破解培训第一课选修作业第5个练习程序.在公司的时候用郁金香OD调试该加壳程序的时候出了点问题,可是回家用吾爱破解版的OD一调试,浑身精神爽,啥问题也没有. 首先使用查壳工具对 ...