[Angular] Difference between Providers and ViewProviders

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_30577801

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6417951.html

本文探讨了Angular中使用viewProviders注册服务的概念及其限制。通过一个具体的例子，展示了如何将服务注入到组件及其视图子组件中，并解释了为何viewProviders无法被内容子组件所访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.

转载于:https://www.cnblogs.com/Answer1215/p/6417951.html