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

我可以通过路线在组件之间切换。所以一个问题是如何在组件中保持不同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的实例？

Answer 1

您需要在AppModule级别提供DataService，而不是在每个组件上提供。{/ p>

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

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

1 个答案: