Question

我是Angular 2+的新手所以我意识到我可能会以错误的方式解决这个问题。我有两个兄弟姐妹的组成部分。当我点击其中一个“链接”时，它会重定向到另一个控制器。我想将对象传递给我要登陆的组件。

这是我到目前为止所做的。

在第一个组件（建筑物清单）中，我有一个活动。

public onClick_building(building: Building) {

  this._building.addBuilding(building);

  this._router.navigate(['/sam/checklistsam']);
}

addBuilding在服务（建筑服务）

中

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptionsArgs, Response, ResponseContentType } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { ServerService } from './../server-service/server.service';
import { Building } from '../../interfaces/building';
import { FranchiseBuildingFilter } from '../../interfaces/franchise-building-filter';



@Injectable()
export class BuildingService {

  public newBuildingIdSubject: Subject<Building> = new Subject<Building>();

  private _url = 'building/';

  constructor(private http: Http, private _server: ServerService) { }

  public addBuilding(building) {
    this.newBuildingIdSubject.next(building);
  }
}

然后我在发送给我的组件（使用单个构建页面）中调用它。

import { Component, AfterViewInit, OnInit } from '@angular/core';

import { Building } from '../../../interfaces/building';

import { BuildingService } from '../../../services/building-
service/building.service';
import { ServerService } from '../../../services/server-service/server.service';

@Component({
  selector: 'app-checklist',
  templateUrl: './checklist.component.html',
  styleUrls: ['./checklist.component.css'],
  providers: [BuildingService, ServerService]
})
export class ChecklistComponent implements AfterViewInit, OnInit {

  public building: Building;

  constructor(private _building: BuildingService) { }

  ngOnInit() {

    this._building.newBuildingIdSubject.subscribe(res => {
    this.building = res;
  });
}

这怎么样。建筑未定义。当我调试时，它不会进入订阅。

还有另一种方法可以做到这一点还是我错过了什么？

提前致谢！

Answer 1

您有几个问题，首先，您的共享服务不是单身，所以基本上它根本不是共享服务。您已在组件级别的提供程序数组中提供它，这意味着您的组件中有单独的服务实例。

如果您希望将服务作为单身人士，则只应将服务作为提供者添加到NgModule中：

@NgModule({
  ...
  providers: [ BuildingService ] // here!
})

将其从组件中删除。如果情况类似，也请删除ServerService。

@Component({
  ...
  // providers: [BuildingService, ServerService] <-- Remove
})

第二个问题，当我们解决这个问题时，Subject不会在这里工作。订阅Subject只会在获得next()时触发。但是，当您在导航到兄弟组件之前调用next()时，它不会在您的兄弟中激发，因为在导航之前next()已经在另一个组件中完成了。

您可以使用在有订阅者时始终发出的BehaviorSubject。

import {BehaviorSubject} from 'rxjs/BehaviorSubject';

public newBuildingIdSubject = new BehaviorSubject<Building>(null);

BehaviorSubject需要初始值，因此请输入您想要的初始值：）

Angular（4）将一个组件从一个组件发送给一个兄弟

1 个答案: