Javascript Angular 4/5问题，通过Angular Services在Angular组件之间路由主题

我有一个带有HTML单击事件的父组件，它将单击的元素传递给Component.ts文件上的一个方法，我希望此单击事件被路由到服务，生成一个新的

主题

，然后使用

下一步（）

方法，将主题传递给其他同级组件，并将数据绑定到同级组件的HTML

因此，该数据的路由如下所示：

private selectedMovieSource = new Subject<IMovie | null>();
selectedMovieChanges$ = this.selectedMovieSource.asObservable();

父组件（通过单击事件）-->服务（通过父组件上的方法）-->同级组件（通过服务）*

我的数据传递从这里开始：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-contacts-list',
  templateUrl: './contacts-list.component.html',
  styleUrls: ['./contacts-list.component.scss']
})
export class ContactsListComponent implements OnInit {

  sortedFavorites: any[] = [];
  sortedContacts: any[] = [];

  constructor (private _apiService: ApiService, private router: Router) {}

  ngOnInit(){ this.getContacts()}

  getContacts() {
     this._apiService.getContacts()
     .subscribe(
       (contacts) => {

        //Sort JSON Object Alphabetically
        contacts.sort( (a, b) => {
          if (a.name > b.name) return 1;
          if (a.name < b.name) return -1;
          return 0;
        });

         //Build new Sorted Arrays
          contacts.forEach( (item) => {
           if (item.isFavorite) {
           this.sortedFavorites.push(item);
           } else {
           this.sortedContacts.push(item);
           }
         });
       });
     }

  openFavorite($event, i) {<--HTML click event passing 'i' in as object clicked
    let selectedFavorite = this.sortedFavorites[i];
      this._apiService.openSelectedContact(selectedFavorite); <--passing said object into method connected to my services.ts file 
      this.router.navigate(['/details']);
  };

}

**现在，我希望我的其他组件从app.service接收数据

import { Component, OnInit } from '@angular/core';
import { ContactsListComponent } from './app/contacts-list/contacts-list.component';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-contact-details',
  templateUrl: './contact-details.component.html',
  styleUrls: ['./contact-details.component.scss']
})
export class ContactDetailsComponent implements OnInit {

  selectedContact: any[] = [];

  error: string;

  constructor(private _apiService: ApiService) { }

  ngOnInit() { this.showContact() }

  showContact() {
  this._apiService.newContactSubject.subscribe(
    data => this.selectedContact = data)  <--Where the data should be showing up from services.ts file
    console.log(this.selectedContact.name);  <-- This is logging Undefined
  }
}

从'@angular/core'导入{Component，OnInit}；
从“./app/contacts list/contacts list.component”导入{ContactsListComponent}；
从“../api.service”导入{ApiService}；
@组成部分({
选择器：“应用程序联系人详细信息”，
templateUrl:“./contact details.component.html”，
样式URL:['./联系人详细信息.component.scss']
})
导出类ContactDetails组件实现OnInit{
所选联系人：任意[]=[]；
错误：字符串；
构造函数（私有_apiService:apiService）{}
ngOnInit（）{this.showContact（）}
showContact（）{
此.\u apiService.newContactSubject.subscribe(
data=>this.selectedContact=data）试试这个：

showContact() {
  this._apiService.newContactSubject.subscribe(
    data => {
       this.selectedContact = data;
       console.log(this.selectedContact.name);
    }
}

两行代码（包括日志记录）都在传递到subscribe的函数中。每次发出一个项时，它只在回调函数中运行代码

作为旁注…通常建议您将主题设置为私有，并使用类似以下代码仅公开其只读可观察性：

private selectedMovieSource = new Subject<IMovie | null>();
selectedMovieChanges$ = this.selectedMovieSource.asObservable();

private selectedMovieSource=新主题（）；
selectedMovieChanges$=this.selectedMovieSource.asObservable（）；

请注意，主题是私有的，它的可观察性使用单独的属性公开。组件然后订阅主题的公共可观察性。
首先，组件的排序方法永远不会排序，因为您忽略了返回值。如果要处理排序，您应该像下面这样使用
concatcts=联系人。排序（…）

我建议你另一种模式：

import { Component, OnInit } from '@angular/core';
import { ContactsListComponent } from './app/contacts-list/contacts-list.component';
import { ApiService } from '../api.service';
import { OnDestroy } from "@angular/core";
import { ISubscription } from "rxjs/Subscription";

@Component({
    selector: 'app-contact-details',
    templateUrl: './contact-details.component.html',
    styleUrls: ['./contact-details.component.scss']
})
export class ContactDetailsComponent implements OnInit, OnDestroy {

    selectedContact: any[] = [];

    error: string;
    private subscription: ISubscription;

    constructor(private _apiService: ApiService) { }

    ngOnInit() { 
      this.subscription = this._apiService.newContactSubject().subscribe(data => {
        this.selectedContact = data;
        console.log(this.selectedContact.name);
      });
    }

    showContact() {
      this._apiService.newContactSubject.subscribe();
    }

    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
}

但是我发现了另一个问题：你已经将你的
selectedContact
定义为一个任意对象数组，然后你想作为一个对象获得值：
this.selectedContact.name
我希望你能解决这个问题：）
非常感谢你提供的这些信息。我有正确的对象通过我的组件并登录到con来自正确的同级组件。我现在在将
selectedContact
绑定到我的HTML时遇到一些问题。在我的HTML模板上，
{{selectedContact.name}
应该可以工作，对吗？我没有收到任何错误，控制台正在记录正确的内容。但是它没有绑定到页面。也许这可能是一篇单独的文章？如果你想查看我的HTML，这里有一个链接到我的新文章，询问我发布的HTML文件的HTML绑定