Question

我已经熟悉Angular 2中依赖注入的工作方式，但我试图弄清楚特定用例是否可行。简而言之，我希望有一个具有依赖注入的子组件，如下所示：

@Component( {
    selector: 'child',
    template: `
        <div class="child">
            <span><a href="#" (click)="idService.regenerate()">Regenerate</a></span>
            <span>{{idService.id}}</span>
        </div>
    `
})
export class ChildComponent {

    constructor(
        protected idService: IdService
    )
    {}
}

在我的组件树的更高级别，我使用providers: [IdService]注入不同的服务实例。这一切都是有道理的，并没有给我一个问题。但是，我想要了解的是，如果可以在不创建＆＃34;副本的情况下实现这一目标。子组件在组件注释中具有自己的providers: [...]属性：

https://plnkr.co/edit/ZMYNIH7lB0Oi6EBSYmfB?p=preview

在该示例中，您将看到底部的一组组件，每个组件都获得IdService类的新实例，但这是因为它们实际上是一个专门请求新实例的新组件。

我想知道的是，如果有一种方法可以通过父组件实现这一目标吗？就像能够说＆＃34;每次子组件试图解决这个特定的依赖关系时给出一个新实例＆＃34;？

Answer 1

如果你想要多个实例（Angular DI默认创建单例并且总是返回相同的实例），你可以使用工厂。

（我对https://stackoverflow.com/a/35985703/217408的回答的示例代码）

@Injectable()
export class User {
    firstName:string;
    lastName:string;
    constructor(user:User, _http:Http){
        this.firstName = User.firstName;
        this.lastName = User.lastName;
    }
    getUserFirstName(){
        return this.firstName;
    }

    addUser(){
        return this._http.post('/api/user/',this);
    }
}

bootstrap(AppComponent, [OtherProviders, HTTP_PROVIDERS, 
    provide(User, {useFactory: 
        () => return (http) => new User(http);}, 
        deps: [Http])]);

export class MyComponent {
  consturctor(@Inject(User) private userFactory) {
    // create new instances by calling the factory
    let user = this.userFactory();
  }
}

Answer 2

我不认为这是可能的，因为分层注射器的工作方式。

如果组件在其关联的注入器中找到提供者，它将使用它来获取/创建服务。如果没有，它将查看父注入器（与父组件关联的注入器），依此类推。这是从底部到顶部而不是从顶部到底部完成的。

如果在父组件中找到提供者，则所有子项将使用相同的实例，因为后者是此级别的单例。

有关分层注入器的更多详细信息，请参阅此问题：

What's the best way to inject one service into another in angular 2 (Beta)?

Angular 2 - 如何仅从父组件

2 个答案: