角4は別のコンポーネントの関数を実行します

Question

私はAngular4を使用してWebアプリケーションを構築していますが、他のコンポーネントの関数を呼び出すためのボタンを作成しようとしています。

私はここに他の同様の質問を読んでいたが、彼らはコンポーネントは、HTMLの宣言で子または兄弟要素であるシナリオ、例えばを持って

：

<parent-component> 
    <child-component></child-component> 
    <sibling-component></sibling-component> 
</parent-component> 

しかし、私は別のに取り組んでいます私のコンポーネントはroutingで呼び出され、私はそれを動作させることができないからです。

基本的に私はの機能を実行するいくつかのコントロールを備えていますが、これらの機能はルーティング経由で読み込まれた他のコンポーネントのデータをトリガ/変更する必要があります。

例えば、私は店のリストを表示する/storeをルーティングしている、私も、私は、ユーザーがヘッダ上のボタンをクリックしたときに表示するこのページの引き出しを持っている、これは、問題となっていますHeaderComponentからStoreComponentにイベントを伝播できないためです。

header.component.ts

@Component({ 
    selector: 'header', 
    templateUrl: ` 
     <section class="container"> 
      <button (click)="clickFilter()">Open filter</button> 
     </section> 
    ` 
}) 

export class HeaderComponent { 
    @Output() onFilter: EventEmitter = new EventEmitter(); 

    clickFilter():void { 
     this.onFilter.emit('Register click'); 
    } 
} 

store.component.ts

@Component({ 
    templateUrl: 'store.html' 
}) 

export class StoreComponent { 
    onFilterClick(event) { 
     console.log('Fire onFilterClick: ', event); 
    } 
} 

// store.html 
<article class="card" (onFilter)="onFilterClick($event)"> 
    Test 
</article> 

しかし、これは動作しません。

これらは私のファイルです。

また、私は実際に関数を呼び出す必要はありません。例えば、StoreComponentのプロパティにバインドして、HTMLファイル内のdivを切り替えるなど、ブール値を渡すことができます。

Answer 1

私はそれをテストする時間がありませんでしたが、同様のソリューションは私のために働いた。あなたの必要性のために作成されたコード。

概念があることである。この

@Component({ 
    selector: 'store', 
    template: `<article class="card"> 
       Test 
       </article>` 
}) 

export class StoreComponent { 
    constructor(private _messageService: MessageService){ 
     this._messageService.listen().subscribe((m:any) => { 
      console.log(m); 
      this.onFilterClick(m); 
     }) 
    } 

    onFilterClick(event) { 
     console.log('Fire onFilterClick: ', event); 
    } 
} 

のようなお店のコンポーネントに使用し、この

// header.component.ts 
@Component({ 
    selector: 'header', 
    templateUrl: ` 
     <section class="container"> 
      <button (click)="clickFilter()">Open filter</button> 
     </section> 
    ` 
}) 

export class HeaderComponent { 
    @Output() onFilter: EventEmitter = new EventEmitter(); 

    constructor(private _messageService: MessageService){} 
    clickFilter():void { 
     // this.onFilter.emit('Register click'); 
     this._messageService.filter('Register click'); 
    } 
} 

のようなあなたのヘッダー・コンポーネントに実装し、その後、この

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

@Injectable() 
export class MessageService { 
    private _listners = new Subject<any>(); 

    listen(): Observable<any> { 
     return this._listners.asObservable(); 
    } 

    filter(filterBy: string) { 
     this._listners.next(filterBy); 
    } 

} 

ようなサービスを作成します。あなたはサービスで観測可能なものを使用して、それが必要なコンポーネントで購読することができます（sto re.component）と私はheader.component

に行ったようにどこにでもアプリ内からイベントを送信することができ、私はそれが私が似状況を持っていましたが、didn'tサービスを作りたいあなたに

Answer 2

を助けることを願っていますこのため。私はコールバックのようにそれを渡すことができました。これは次のようなものです：

header.componentです。TS

@Component({ 
selector: 'header', 
templateUrl: ` 
    <section class="container"> 
     <button (click)="myFunction()">Open filter</button> 
    </section> 
`}) 
export class HeaderComponent { 
    @Input() myFunction: Function; 
} 

は、それからちょうど機能を渡し、それを呼び出し、パラメータ

// store.html 
<header [myFunction]="functionOnStore"></header> 

そして、ちょうどそれは、これらのコンポーネントは、アプリ内に配置されているかは全く明らかではないストアコンポーネント