Question

所以我得到了一个名为TargetService的服务，它可以注入各种其他组件。此TargetService有一个名为Targets的属性，它是Target个对象的集合。

我的问题是我希望此集合在路由到另一个视图后保持不变。我的路由工作正常，但是一旦路由发生变化，服务就会丢失任何变量的内容，本质上，它会重新初始化服务。我的理解是这些注入的服务是可以传递的单身人士吗？

在以下示例中，在TargetIndex上，单击一个按钮，该按钮填充服务上的Targets[]对象（this.targetService.targets = ts;）。工作正常，然后我路由到TargetShow页面，然后回到这个索引，现在这个Targets[]属性为空，当我希望它包含我已经填充的内容。

我在这里缺少什么？

App.Module

const routes: Routes = [
  { path: '', redirectTo: 'targets', pathMatch: 'full'},
  { path: 'targets', component: TargetIndexComponent },
  { path: 'targets/:id', component: TargetShowComponent }
]

@NgModule({
  declarations: [
    AppComponent,
    TargetComponent,
    TargetIndexComponent,
    TargetShowComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  providers: [TargetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

TargetService

@Injectable()
export class TargetService {
  public targets: Target[];

  constructor(private http: Http) {}

  getTargets(hostname: String): Observable<Target[]> {
    return this.http.request(`url`).map(this.extractData);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || [];
  }

}

TargetIndex

@Component({
  selector: 'app-targets',
  templateUrl: './target-index.component.html',
  styleUrls: ['./target-index.component.css'],
  providers: [TargetService]
})
export class TargetIndexComponent implements OnInit {
  loading = false;

  constructor(private http: Http, private targetService: TargetService) {}

  loadTargets(hostname: HTMLInputElement) {
    this.loading = true;
    this.targetService.getTargets(hostname.value)
    .subscribe((ts: Target[]) => {
      this.targetService.targets = ts;
      this.loading = false;
    })
  }

  ngOnInit() {
  }

}

TargetShow

@Component({
  selector: 'app-target-show',
  templateUrl: './target-show.component.html',
  styleUrls: ['./target-show.component.css'],
  providers: [TargetService]
})
export class TargetShowComponent implements OnInit {
  id: string

  constructor(private route: ActivatedRoute, private targetService: TargetService) {
    route.params.subscribe(params => { this.id = params['id']; })
  }

  ngOnInit() {
  }

}

Answer 1

尝试从组件提供程序中删除TargetService，因为您已将其添加到模块提供程序中。将此服务添加到组件提供程序时，DI会创建它的新实例。

以下是https://angular.io/docs/ts/latest/guide/dependency-injection.html的引用：

何时使用NgModule和应用程序组件？一方面，NgModule中的提供程序在根目录中注册   注射器。这意味着每个提供商都在NgModule中注册   将在整个申请中提供。

另一方面，在应用程序组件中注册的提供程序   仅适用于该组件及其所有子组件。

Angular 2单例服务不作为单身

1 个答案: