Angular2 - 使用服务在组件之间共享数据

Question

我正在尝试使用公共共享服务在组件之间共享数据。 这就是服务。

@Injectable()
export class JobService {
public jobType=null;
public examples=[];
}

这是我的第一个组件。 组件中的完整代码太长，所以我只是添加了一个...来表示其余代码，但在此组件中设置了服务的jobType和examples变量。

@Component({
selector: 'app-job',
templateUrl: './job.component.html'
})
export class JobComponent implements OnInit {
constructor(private jobService: JobService, private authService: AuthService, private router: Router) {
}
...
}

第二个组件是

@Component({
selector: 'app-preview',
template:'./preview.component.html'
})
export class PreviewComponent implements OnInit {
jobType;
examples;
constructor(private jobService: JobService) {
}  
ngOnInit() {
this.jobType=this.jobService.jobType;
this.examples=this.jobService.examples;
}
}

所以这个想法是它应该能够获取在JobComponent内部服务中设置的jobType和examples变量。

服务本身在模块文件中提供

@NgModule({
declarations: [
JobComponent,
JobListComponent,
JobDetailsComponent,
PreviewComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule,
TabsModule
],
providers: [JobService]
})
export class JobModule {
}

我的理解是，这意味着JobService仅实例化一次，并在组件之间共享。

问题出现在JobComponent的 html 模板中。 它包含一个路由器链接，用于在新选项卡中打开PreviewComponent，即

<a target="_blank" routerLink="/preview">Preview</a>

打开此链接时，JobService中的变量已经在JobComponent中设置(我检查了这是真的)。/preview路由与PreviewComponent相关联。 当新窗口打开时PreviewComponents读取JobService变量，它们尚未设置，这使我相信PreviewComponent创建了一个全新的JobService实例。 然而，根据 Angular2 - 使用服务在组件之间共享数据 如果在模块文件中仅提供一次JobService则不应发生这种情况。 谁能告诉我为什么这两个组件似乎没有共享JobService？

Answer 1

这是因为您在新窗口中打开页面。JobService的状态没有得到保留。一个可能的解决方案是使用 url 查询参数将JobService的状态传递给预览组件，并在新页面中重建服务，例如，导航到/preview?jobType=something&examples=are,comma,separated,list或将状态保存在浏览器中(本地存储、cookie 等)并在页面初始化时读取它

Answer 2

要保存共享资源的状态，您应该使用BehaviorSubjects。

@Injectable()
export class JobService {
public jobType$: BehaviorSubject<any> = new BehaviorSubject('');
public examples$: Behavior Subject<any[]> = new BehaviorSubject([]);
public jobTypes = null;
public examples = [];
setJobType(jobType) {
this.jobTypes = jobType;
this.jobType$.next(this.jobTypes);
}
//set the same way for examples
}

然后在每个组件中。

@Component({
selector: 'app-job',
templateUrl: './job.component.html'
})
export class JobComponent implements OnInit {
constructor(private jobService: JobService, private authService: AuthService, private router: Router) {}
//somewhere like ngOnInit subscribe to jobType$ and or examples$
//on some event or trigger of the ui call the setJobType method with changes.
}

@Component({
selector: 'app-preview',
template:'./preview.component.html'
})
export class PreviewComponent implements OnInit {
jobType;
examples;
constructor(private jobService: JobService) {
}  
ngOnInit() {
this.jobService.jobType$.subscribe(result => this.jobType = result);
this.jobService.examples$.subscribe(result => this.examples = result);
}
}