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

在下面的示例中,在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() {
  }

}