Angular Subject（）可觀察，在不同組件中不起作用

Question

找到-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事件onSelectionChange()時，要將側欄屬性（如PivotTableSalaryBoolean的值更改為True （其目的是顯示隱藏菜單）

要做到這一點，我使用的主題（）在我的服務，並希望它觸發后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);

以及需要返回數據的位置，您只需訂閱usersIsSelected本身即可：

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