Angular 2在更改路线时保留服务实例

Question

我有三个组件，它们基本上都使用相同的 DataService。不是因为相同的数据，而是因为完全相同的方法和模式:

@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) {
    }
}

我可以通过路由在组件之间切换。所以一个问题是如何在组件中保持不同数据服务的状态？据我所知，这需要不同的 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 实例？

Answer 1

您需要在 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 {}