Angular 可重复使用的组件值结转至第2页/任何其他页面

我有一个组件

搜索组件
就像下面的html代码片段一样

 <form class="form-horizontal form-material" (ngSubmit)="Search()" id="carsearch" [formGroup]="bookCarForm"
      novalidate>
      <div class="row">
        <div class="col-sm search-input-align">
          <input [owlDateTime]="dt1" [min]="min" [owlDateTimeTrigger]="dt1" class="form-control" formControlName="start_datetime"
            placeholder="Start Date & Time">
          <owl-date-time #dt1></owl-date-time>
          <span class="input-group-addon"><i class="fa fa-calendar fa-search-align"></i></span>
        </div>

        <div class="col-sm search-input-align">
          <input [owlDateTime]="dt2" [min]="min" [owlDateTimeTrigger]="dt2" class="form-control" formControlName="end_datetime"
            placeholder="End Date & Time">
          <owl-date-time #dt2></owl-date-time>
          <span class="input-group-addon "><i class="fa fa-calendar "></i></span>
        </div>
        <div class="col-sm search-input-align">
          <div class="toggle" (click)=toggleTextBox()>
            <input type="checkbox" class="check" >
            <b class="b switch"></b>
            <b class="b track"></b>
          </div>
          <h4 id="door-delivery">Door Delivery</h4>
        </div>
        <div class="col-sm search-input-align address">
          <div *ngIf="!visability">
            <input class="form-control " formControlName="Enter_address" type="text" placeholder="Enter Address"
              >
          </div>
          <div *ngIf="visability">
            <select formControlName="p_location" class="form-control selectpicker" id="select-city" >
              <option data-tokens="" disabled>
                <h2>select any one </h2>
              </option>
              <option data-tokens="Delhi">
                <h2>Hebbal</h2>
              </option>
              <option data-tokens="Mumbai">
                <h2>Yelahanka</h2>
              </option>
              <option data-tokens="hyderabad">
                <h2>BTM</h2>
              </option>
            </select>
          </div>
        </div>
        <div class="col-sm search-input-align btn-book-now">
          <button type="submit" [disabled]="bookCarForm.invalid" class="btn btn-primary align-items-center btn-align">Book
            Now</button>
        </div>
      </div>
    </form>

此
搜索组件
可重用。目前我正在
Page1
中使用此表单，在
Page1
中选择值并重定向到
page2
。在第2页中，我也使用了这个表单。第1页中给出的所有值是多少？这应该结转到第2页。所以我尝试了Event
Emitter
，但它不是结转值。
，但这并不能帮助我。实现这一输出的最佳方式是什么。有人能帮我吗。
创建以下服务存储数据服务。ts：

import {Component, Injectable} from 'angular2/core'
import {BehaviorSubject, Observable} from 'rxjs';

@Injectable()
export class StoredDataService {
  values:any;
  values$:BehaviorSubject<any> = new BehaviorSubject('');
  constructor(){}

  setValues(values){
   this.values = values;
   this.values$.next(values);
  }
} 

然后将其添加到NgModule中的providers数组中

@NgModule({
  declarations: [
  ...],
  imports: [
  ...],
  providers: [
  StoredDataService],
  bootstrap: [AppComponent]
})

现在，通过将其添加到构造函数，将其注入组件
search component.ts
，如下所示：

constructor (public storedDataService: StoredDataService){}

最后，通过执行以下操作来使用它添加数据

this.storedDataService.setValues(this.Search.value);//storing values in local storage

要在代码中的任何位置检索数据（即使是在其他组件或服务中，这就是诀窍），您需要订阅值$：

 const subscription = this.storedDataService.values$.subscribe( (values) => {
 //set a local variable here storing values in you component
 //...
 this.values = values
 console.log (values);
})

如果要在另一个组件中再次使用service StoredDataService，请记住像以前一样将其注入构造函数中，并订阅值$。每次代码的任何部分调用storedDataService.changeValues（…）时，都会执行订阅器回调的任何位置，并提供新值

编辑

我更改了代码以添加行为主体和订阅，否则它将不起作用
您可以使用共享服务并在那里保留搜索值。如何做，任何示例请注意，为了更好地执行此操作，您还可以使用Observable，通知不同部分存储的数据已更改。这里有一个链接，您可以看到它是如何运行的：一切正常，但值没有显示在第2页输入文件中。对不起，我更新了答案。您需要使用主题并订阅。然后，每次回调更改时，您都会在回调中检索新值。此外，您还需要确保服务作为单例注入。实际上，这是同一模块中服务的标准依赖注入的角度默认行为（在角度模块配置的[providers]部分）。否则，如果使用多个模块和/或自定义依赖项注入，请小心！是的，@Pac0在上面的代码中我在app.module.ts的providers NgModule中添加了服务。的确，如果您要管理多个模块，则必须在不同的模块中处理这些问题。
this.storedDataService.setValues(this.Search.value);//storing values in local storage

 const subscription = this.storedDataService.values$.subscribe( (values) => {
 //set a local variable here storing values in you component
 //...
 this.values = values
 console.log (values);
})