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. Android中使用HttpClient实现HTTP通信效果

    HTTP通信,这一案例在操作的时候遇到N多种种问题,是前面看过几个实例里面最麻烦的一个.由于没有系统的接触过JAVA,所以出了非常多错误,也无从下手解决,这里经过对错误的检索实现了HTTP通信,以做记 ...

  2. Apache中PHP5.3 php5.4如何使用ZEND

    Apache中PHP5.3 php5.4如何使用ZEND 有一套zend加密程序,需要安装ZEND,经过多次尝试,结果如下 由于PHP有安全线程(TS)和非安全线程(NTS)区分,PHP官方网站上说, ...

  3. MyBatis学习总结(15)——定制Mybatis自动代码生成的maven插件

    ==================================================================================================== ...

  4. Qt Creator 源码学习 03:qtcreator.pro

    当我们准备好 Qt Creator 的源代码之后,首先进入到它的目录,来看一下它的源代码目录有什么奥秘. 这里一共有 9 个文件夹和 9 个文件.我们来一一看看它们都是干什么用的. .git: 版本控 ...

  5. 硬件——nrf51822第二篇,如何设置keil用来下载程序

    转自电子发烧友论坛 未完,待续...... 这里就是根据自己的项目了,并不一定是按照下面的图片去做.

  6. JS学习笔记 - 普通选项卡(面向过程)

    疑问: 1. getElementsByTagName 和 getElementsByClassName  的区别? 分别在什么应用场景?    <!DOCTYPE html> <h ...

  7. Java 学习(18):Java 序列化& 网络编程& 发送邮件

    --Java 序列化 -- 网络编程 -- 发送邮件 Java 序列化 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信 ...

  8. 为什么我要选择erlang+go进行server架构(2)

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 为什么我要选择Erlang呢? 一.erlang特别适合中小团队创业: erl ...

  9. 开发板 视频04_05 ubuntu的联网及基本设置

    4g内存 如果电脑有两g,只能给1.5g 处理器可以根据实际选 usb3.0 或者 2.0 联网模式:: 桥接模式 启动式连接,,,,网是不固定的 仅主机模式,主机和虚拟机在一个网络 第三种联网,自定 ...

  10. Sass(SCSS)中文手册——入门

    简书原文 https://www.jianshu.com/p/e82c27aa05c7 前言 该中文手册是我在Sass中文文档的基础上编辑的,或者也可以理解为就是Sass中文文档的翻版.之所以有这篇文 ...