angular - 使用 Angular 2 中的服务在组件之间发送数据

Question

我正在尝试使用服务在两个组件之间发送数据。但是，当“子”组件首次加载时，我在填充数据时遇到了问题。

当您从release-list.component 上的无序列表中选择“release”时，它将通过路由器导出加载release-detail.component。 release-detail.component 应显示发布艺术家。

如果您选择一个版本然后再次选择一个版本，它会起作用。但在填充数据之前，我必须“加载”release-detail.component 两次。我觉得我很接近，但我一定错过了一些东西。任何帮助将不胜感激。

谢谢

我已经提到了 previous question和 Angular documentation

发布.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

import { MockReleaseList, ReleaseInterface } from './mock-releases';

@Injectable()

export class ReleaseService {
    private releaseSubject$ = new Subject();

    getReleases(): ReleaseInterface[] {
        return MockReleaseList;
    }

    getRelease() {
        return this.releaseSubject$;
    }

    updateRelease(release: {artist: string, title: string, category: string}[]) {
        // console.log(release);
        this.releaseSubject$.next(release);
    }

}

release-list.component.ts

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

import { Router } from '@angular/router';
import { Location } from '@angular/common';

import { ReleaseService } from '../../../shared/services/release.service';
import { MockReleaseList, ReleaseInterface } from '../../../shared/services/mock-releases';

@Component({
  selector: 'ostgut-releases',
  template: `
    <h3>Label List</h3>
    <ul>
        <li *ngFor="let release of releases" (click)="onSelect(release)">{{ release.artist }}</li>
    </ul>
    <router-outlet></router-outlet>
  `,
})
export class ReleaseListComponent implements OnInit { 
    private releases: ReleaseInterface[];

    constructor (
        private _router: Router,
        private _releaseService: ReleaseService
    ) {}

    ngOnInit(): ReleaseInterface[] {
        return this.releases = this._releaseService.getReleases();
    }

    onSelect(release: any): void {
        this._releaseService.updateRelease(release);
        this._router.navigate(['/release-list/release-detail', release.category]);
    }

}

release-detail.component.ts

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

import { Router, ActivatedRoute, Params } from '@angular/router';

import { ReleaseService } from '../../../../shared/services/release.service';
import { ReleaseInterface } from '../../../../shared/services/mock-releases';

@Component({
  selector: 'ostgut-release-detail',
  template: `
    <h3>Release Detail</h3>
    <p>{{ release.artist }}</p>
  `,
})
export class ReleaseDetailComponent implements OnInit { 
    private routeParam: string;
    private routeParamSub: any;
    private release: any;

    constructor(
        private _activatedRoute: ActivatedRoute,
        private _router: Router,
        private _releaseService: ReleaseService
    ) {}

    ngOnInit(): void {
        this.release = this._releaseService.getRelease().subscribe(release=>{
            return this.release = release;
        });
    }

}

Answer 1

我认为问题可能是您的 Subject 在您在 ReleaseDetailComponent 内订阅它之前发布了它的值。当您第二次执行此操作时，将发布一个新的 Release，并且 ReleaseDetailComponent 已创建 - 这意味着它将起作用。

要解决此问题，您可以尝试在服务中使用 BehaviorSubject 而不是常规 Subject。即使您在最后一个值发布后订阅，BehaviorSubject 也会为您提供最新发布的值。不过，它还需要一个默认值，因此您可能需要在 ReleaseDetailComponent 模板中添加一些空检查。

实现可能如下所示:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; // <-- note the import!

import { MockReleaseList, ReleaseInterface } from './mock-releases';

@Injectable()

export class ReleaseService {
    private releaseSubject$ = new BehaviorSubject(undefined);

   // The rest is the same

}

在您的模板中，attt null 检查，因为我们为 BehaviorSubject 设置的默认值是 undefined。当然，如果您愿意，您可以将默认值(传递到 BehaviorSubject 的构造函数中的值)设置为空的 Release 或其他值。

template: `
    <h3>Release Detail</h3>
    <p>{{ release?.artist }}</p> <!-- Note the '?' -->
  `,

如果您想了解有关不同类型的主题的更多信息，请参阅以下文档:

• BehaviorSubject
• Subjects

我希望这有帮助!