Angular 2在更改路線時保留服務實例

我有三個基本上都使用相同DataService的組件。不是因爲相同的數據，而是因爲完全相同的方法和模式：Angular 2在更改路線時保留服務實例

@Component({ 
    templateUrl: './data-list-1.html', 
}) 
export class DataOne { 
    constructor(private dataService:DataService) { 
    } 
} 

@Component({ 
    templateUrl: './data-list-2.html', 
}) 
export class DataTwo { 
    constructor(private dataService:DataService) { 
    } 
} 

@Component({ 
    templateUrl: './data-list-3.html', 
}) 
export class DataThree { 
    constructor(private dataService:DataService) { 
    } 
}

我可以通過路由在組件之間切換。所以一個問題是我怎樣才能保持組件中不同DataServices的狀態？據我知道，需要DataService不同的情況下，由於各持不同的數據：

@Component({ 
    templateUrl: './data-list-1.html', 
}) 
export class DataOne { 
    constructor() { 
     this.dataService = new DataService(); 
    } 
} 

@Component({ 
    templateUrl: './data-list-2.html', 
}) 
export class DataTwo { 
    constructor() { 
     this.dataService = new DataService(); 
    } 
} 

@Component({ 
    templateUrl: './data-list-3.html', 
}) 
export class DataThree { 
    constructor() { 
     this.dataService = new DataService(); 
    } 
}

現在雖然他們的DataService相同的模式，他們都有自己的實例與他們自己的數據。但目前尚未解決一個問題。如何在更改路由時保留DataService的實例？

來源

2017-03-03 Trevor Hector

你在哪裏提供' DataService'？如果您在更改路由時由路由器添加和刪除的組件上提供它，則該服務實例也將被銷燬並重新創建。您需要在父組件中提供它，但是如果路由組件被添加到同一父組件，它們將發生衝突。 –

@GünterZöchbauer所有組件都屬於同一模塊。這就是我提供DataService的地方。 –

如果你在模塊中提供它，那麼你不能有不同的實例（除了延遲加載的模塊）並且狀態不會丟失。 –

您需要在AppModule級別提供DataService，而不是在每個組件上。

@NgModule({ 
    imports: [AppRoutingModule, 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     ReactiveFormsModule],  // module dependencies 
    declarations: [],   // components and directives 
    bootstrap: [AppComponent],  // root component 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    providers: [DataService] 
}) 
export class AppModule { }

指定服務，使每個組件和它的孩子們有自己的服務的情況下，你會想在組件級，像這樣提供的服務：

@Component({ 
    selector: "some", 
    templateUrl: "./some.component.html", 
    providers: [DataService] 
}) 
export class SomeComponent {}

來源

2017-03-03 18:20:09

是的，這很清楚。所有組件都屬於同一個模塊。這就是我提供DataService的地方。 –

你是否在你的組件中重新提供它們？如果不是，那麼所有的組件應該得到相同的服務參考。 –

是的，但我不想要相同的參考。每個應該有它自己的實例。 –

Angular 2在更改路線時保留服務實例

回答

相關問題