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);
   }

employee.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中，当它侦听find-employee事件时，想要将侧边栏属性（如PivotTableSalaryBoolean的值更改为True onSelectionChange()（用于显示隐藏菜单）

并执行此操作，我在服务中使用Subject（），希望它在onSelectionChange()中触发sidebar.componnent.ts后会监听该事件，但它不像我希望...我是否缺少这些可观察的东西重要的东西？

Answer 1

尝试使用不需要任何初始化的重播主题

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();
    }
}

Answer 2

首先尝试更改主题初始化：

usersIsSelected : Subject<any> = new Subject<any>();

如果这不起作用，则可以尝试以下方式：

find-employee.component.ts 而不是

this.serviceEmployee.sendSelected（this.employeeSelect）;

使用此

this.serviceEmployee.usersIsSelected.next(this.employeeSelect);

以及需要返回数据的位置，您可以只订阅用户IssSelected本身：

this.serviceEmployee.getSelected().subscribe(
   (res) => this.someThing = res // and further perform the other activities
);