dependency-injection - 如何为每个子组件提供一个实例？

Question

我越来越熟悉依赖注入(inject)在 Angular 2 中的工作原理，但我正在尝试弄清楚特定用例是否可行。

简而言之，我想要一个像这样注入(inject)依赖项的子组件:

@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] 来注入(inject)服务的不同实例。这一切都是有道理的，不会给我带来问题。但是，我想了解的是，如果不使用自己的 providers: [...] 组件注释中的属性创建子组件的“副本”，是否可以做到这一点:

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

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

我想知道是否有一种方法可以通过父组件实现这一点？就像能够说“每次子组件尝试解决此特定依赖项时都提供一个新实例”？

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();
  }
}