Angular 2 - 如何從只有父組件的每個子組件提供依賴項的新實例

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]注入服務的不同實例。這一切都有道理，並沒有給我一個問題。不過，我想了解的是，如果這是可能的，而不在組件註釋創建一個具有自己providers: [...]屬性的子組件的「複製」：

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

在那個例子中，你會看到最下面的一組組件分別獲得了IdService類的一個新實例，但這是因爲它們實際上是一個專門請求新實例的新組件。

我想知道的是，如果有一種方法可以簡單地用父組件實現這一點？就像能夠說「每次一個子組件試圖解決這個特定的依賴關係時給一個新實例」一樣？

Answer 1

我不認爲這是可能的，因爲分層注射器的工作方式。

如果組件在其關聯的注入器中找到提供程序，它將使用它來獲取/創建服務。如果不是，它將查看父注入器（與父組件關聯的注入器）等等。這是從底部到頂部完成的，而不是從頂部到底部。

如果在父組件中找到提供者，則所有孩子將使用相同的實例，因爲後者在此級別是單身人士。

看到這個問題有關分層注入更多的細節：

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

Answer 2

如果你想多個實例（角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(); 
    } 
}