[Angular] Difference between Providers and ViewProviders
2017-02-20 00:19
447 查看
For example we have a component:
For TodoAppComponent, we make 'TodoList' as 'viewProviders'.
And inside TodoAppComponent, we have TodoInputComponent & TodoComponent as view children, and AppFooterComponent as content child:
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:
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
Why would I use
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
providersand 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 ngAfterViewInit and ngAfterContentInit
- [Angular] Difference between ViewChild and ContentChild
- What is the difference between addView and addViewInLayout?
- Difference Between Razor View Engine and ASPX View Engine
- what is the difference between MirrorView, SanCopy, SanpSure and SnapView
- Difference between ScrollView and ListView
- Difference between a View's Padding and Margin
- What is the difference between CollectionView and CollectionViewSource?
- Difference Between Razor View Engine and ASPX View Engine
- 我也谈“the difference between Factory, Service, and Provider in Angular”
- Difference between ViewData and TempData
- What is the difference between database table and database view?
- Difference between List View and DataGrid in WPF
- The difference between LayoutInflater.inflate and findViewById
- Difference between List View and DataGrid in WPF
- The differences between AngularJS $apply, $digest, and $evalAsync
- Difference between drawing with QPainter and (QGraphicsView + QGraphicsScene)
- Difference between component and directive in Angular 2
- the differences between DataGrid and DataList in HTML View
- The difference between (()) and ().