javascript - Angular subject() 可观察，在不同的组件中不起作用

Question

find-employee.component.ts

  @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
  gridForFindEmployee: any;

  constructor(
    private route: Router,
    private serviceEmployee: EmployeeService
  ) {
    this.loadDataToGrid();
  }

  onSelectionChanged(param) { //the event when someone select a employee
    if (this.dataGrid.selectedRowKeys.length === 1) {
      this.disableButtonFindEmployee = false;
    } else {
      this.disableButtonFindEmployee = true;
    }
    this.employeeSelect = param.selectedRowsData[0];
    this.serviceEmployee.sendSelected(this.employeeSelect); // send it to service
    console.log(this.dataGrid.selectedRowKeys.length);
   }

员工.service

@Injectable()
export class EmployeeService
{
    usersIsSelected = new Subject<any>();
    selected = [];

    constructor(private http: Http, private platformLocation: PlatformLocation, private apiResolver: ApiResolver) {       
        this._baseUrl = apiResolver.GetHumanResourceUrl(platformLocation);
    }

    sendSelected(id: any) {
        this.usersIsSelected.next(id);
    }

    getSelected(): Observable<any> {
        return this.usersIsSelected.asObservable();
    }
}

sidebar.component.ts

    constructor(public settings: SettingsService, private router: Router, private serviceEmployee: EmployeeService) {
    this.serviceEmployee.getSelected().subscribe( //listener in constructor
      (selected: any) =>{
        if(selected != null){
          this.reportLabel = true;
          this.PivotTableSalaryBoolean = true;
          this.transactionLabel = true;
          this.RoosterBoolean = true;
        }
        console.log(selected);
      }
    );
   }

ngOnInit() {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationStart) {
        this.settings.hideSidebar("left");
      }
    });
    this.serviceEmployee.getSelected().subscribe( //listener in ngOninit
      (selected: any) =>{
        if(selected != null){
          this.reportLabel = true;
          this.PivotTableSalaryBoolean = true;
          this.transactionLabel = true;
          this.RoosterBoolean = true;
        }
        console.log(selected);
      }
    );
  }

sidebar.component.html

<div class="list-nav-item" routerLinkActive="active" *ngIf="PivotTableSalaryBoolean">
                    <a routerLink="/payroll/employee-for-pivot-table-salary" class="list-nav-link">
                        <span class="list-nav-icon">
                              <i class="fa fa-adjust"></i>
                          </span>
                        <span class="list-nav-label">Pivot Table Salary</span>
                    </a>
                </div>

<小时/>

所以我想做的是，在 sidebar.component.ts 中，我想将侧边栏属性的值(例如 PivotTableSalaryBoolean)更改为 True 当它监听 find-employee 事件时 onSelectionChange() (其目的是显示隐藏菜单)

为了做到这一点，我在我的服务中使用了Subject()，并希望在它触发sidebar.componnent.ts中的onSelectionChange()之后听那个事件，但它并没有像我希望的那样工作......我是否错过了这个 Observable 东西的重要内容？

Answer 1

尝试使用不需要任何初始化的replaysubject

import {ReplaySubject } from 'rxjs/Rx';
@Injectable()
export class EmployeeService
{
    usersIsSelected = new ReplaySubject<any>(1);
    selected = [];

    constructor(private http: Http, private platformLocation: PlatformLocation, private apiResolver: ApiResolver) {       
        this._baseUrl = apiResolver.GetHumanResourceUrl(platformLocation);
    }

    sendSelected(id: any) {
        this.usersIsSelected.next(id);
    }

    getSelected(): Observable<any> {
        return this.usersIsSelected.asObservable();
    }
}