在Angular里ViewProviders和Providers的区别

顺亿

2026-10-19 • 👁 0人浏览过

这次给大家带来在Angular里ViewProviders和Providers的区别，在Angular里使用ViewProviders和Providers的注意事项有哪些，下面就是实战案例，一起来看一下。在Angular中使用依赖注入（DI）的时候，我们一般会使用

providers

。其实要做同样的事我们还有另外一个选择：

viewProviders

。

viewProviders

允许我们定义只对组件的view可见的provider。下面我们用例子详细的说明这一点。假设我们有一个简单的服务：

// myService.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService{
  testIfGetService(where){
    console.log('Got My Service in ' + where);
  }
}

这个服务很简单，只需要打印出在哪里调用了该服务。然后有一个子组件，是用来投射到父组件里面的（等会将会看到）：

// child.component.ts
import { Component } from '@angular/core';
import { MyService } from './myService.service';
@Component({
  selector: 'vp-child',
  template: `
    This is child!!!
  `
})
export class VPChild{
  constructor(
    private service: MyService
  ){
    this.service.testIfGetService('child');
  }
}

这个组件注入了

MyService

服务，调用

MyService

的

testIfGetService

方法，并传入

child

表明这是在child组件调用的。还有另外一个子组件，这个组件是用来放在父组件的模板（template）里面的：

// viewChild.component.ts
import { Component } from '@angular/core';
import { MyService } from './myService.service';
@Component({
  selector: 'vp-viewchild',
  template: `
    This is viewChild!!!
  `
})
export class ViewVPChild{
  constructor(
    private service: MyService
  ){
    this.service.testIfGetService('viewChild');
  }
}

这里同样注入

MyService

服务，调用

MyService

服务的

testIfGetService

方法，并传入

viewChild

。最后是父组件：

// parent.component.ts
import { Component } from '@angular/core';
import { MyService } from './myService.service';
@Component({
  selector: 'vp-parent',
  template: `
    This is parent!!!
    
    
  `,
  providers: [MyService]
})
export class VPParent{
  constructor(
    private service: MyService
  ){
    this.service.testIfGetService('parent');
  }
}

在父组件，用

providers

MyService

，然后调用

MyService

的

testIfGetService

传入

parent

。然后就像这样使用父组件：

运行程序，控制台打印出了结果：一切就像预期那样！！然后，我们用

viewProviders

代替

providers

MyService

，看看会发生什么：

// parent.component.ts
import { Component } from '@angular/core';
import { MyService } from './myService.service';
@Component({
  selector: 'vp-parent',
  template: `
    This is parent!!!
    
    
  `,
  viewProviders: [MyService] // <---
})
export class VPParent{
  constructor(
    private service: MyService
  ){
    this.service.testIfGetService('parent');
  }
}

这样修改之后，运行程序，发现报错了：如果把contentChild 注释掉，就像这样：

是不会报错的：这就说明，在父组件用

viewProviders

注册的provider，对contentChildren是不可见的。而使用

providers

注册的provider，对viewChildren和contentChildren都可见！补充说明：组件会逐级向上寻找provider，直到找到为止，否则就会抛出错误。就像这里：

vp-child

往上找

MyService

的provider，结果在

vp-parent

找到了。但是在用

viewProviders

的时候，

vp-child

往上找，也就是到

vp-parent

，结果没找到，然后又去找

vp-parent

的父级，还是没找到（因为在这个例子里，我们只在

vp-parent

注册了

MyService

），然后又继续往上找……如此找到边界也没找到，所以抛出了一个错误。如果你不希望这样，可以使用

@Host

做出限制，就像这样：

constructor(
    @Host() private service: MyService
){}

关于@Host()本文不作展开，有兴趣可以自行google。相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读： Vue.js的表单输入绑定 React中有哪些类定义组件