angle 4 input \ outputなしのコンポーネント間でデータを渡す

Question

角度4のコンポーネント間でデータを渡そうとしています。 input \ outputは使用したくありません。in Homecomponentサービスにデータをプッシュしたいと思っています。サービスからデータを取得したいのです。 私はちょうど観察可能なものと主題との道を見て、私は成功せずにそれを実装しようとしました。

HomeComponent

import { ClientService } from './../clinet-service.service'; 
import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'page-home', 
    template: 'pages/home/home.html', 
}) 
export class HomeComponent implements OnInit { 

    clients = ['john', 'jane'] 
    clientFound = false 

    // constructor(private navController: NavController) { } 
    constructor(private clientService: ClientService) { 

    } 

    openClient(client) { 
    } 
    ngOnInit() { 
    this.clientService.subject.next([ 
     { name: 'Harold', age: 35 } 
    ] 
    ); 

} 

} 

page2component

import { ClientService } from './../clinet-service.service'; 
import { Component } from '@angular/core'; 
@Component({ 
    selector: 'page-2', 
    template: '{{clients}}' 
}) 
export class Page2Component { 
    client:any; 

    constructor( private clientService: ClientService) { 

    } 

    ngOnInit(){ 
    debugger 
    let clients = this.clientService.observable.subscribe(clients => console.log(clients)); 
    } 
} 

clientService

import { Injectable, OnInit, OnDestroy } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Observable } from "rxjs/Observable"; 

@Injectable() 

export class ClientService { 
    subject: Subject<any> = new Subject<any>(); 
    observable: Observable<any> = this.subject.asObservable(); 


} 

私がサービスに単純なことなプッシュデータを作成しようとするため、実際に私は、実装の仕方が好きではなかったです他のコンポーネントでそれを取得しますが、私はそれを行うことはできません。

Answer 1

複雑にする必要がないのでできません。ここでは、あなたが何をすべきかです：

HomeComponent

ngOnInit() { 
    this.clientService.subject.next([{ 
     {name: 'Harold', age: 35 }, 
     {name: 'Kumar', age: 40 }, 
    }]); 
} 

page2Component

ngOnInit(){ 
    let clients = this.clientService.observable.subscribe(clients => console.log(clients)); 
} 

サービス

export class ClientService { 

    subject: Subject<any> = new Subject<any>(); 
    observable: Observable<any> = this.subject.asObservable(); 

    constructor() {} 
} 

Answer 2

HomeComponentデコレータが壊れています。外部テンプレートファイルを使用している場合は、templateの代わりにtemplateUrlを使用する必要があります。

間違っ

@Component({ 
    selector: 'page-home', 
    template: 'pages/home/home.html', 
}) 

正しい

@Component({ 
    selector: 'page-home', 
    templateUrl: 'pages/home/home.html', 
}) 

https://angular.io/api/core/Component