我越来越熟悉依赖注入(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
类的新实例,但这是因为它们实际上是专门请求新实例的新组件。
我想知道是否有一种方法可以通过父组件实现这一点?就像能够说“每次子组件尝试解决此特定依赖项时都提供一个新实例”?
最佳答案
如果你想要多个实例(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();
}
}
关于dependency-injection - 如何为每个子组件提供一个实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36043821/