2017-12-01 26 views
0

私は2つのフィールドがディレクトリリストと検索ボタンをフィルタリングするために利用できるフィルタコンポーネントを持っています。角4で検索結果を表示する方法

フィルタリングされた結果を、すべてのディレクトリリストが表示されているメインコンポーネントに表示します。

実際にすべてがうまくいきます。検索ボタンをクリックすると、filter.component.tsファイルで検索機能が実行され、apiから結果が得られ、結果がコンソールに表示されます。フィルタリングされたリストを表示する必要があるメインコンポーネントに結果を渡すことができません。

+0

https://angular.io/guide/component-interaction –

答えて

0

コードサンプルは表示されません。私はあなたが既にフェッチデータをフィルタリングしていることを願っています。別のデータセットを取得する必要がある場合は、そのデータを親コンポーネントに送り返す必要があります。

これを実行する方法はたくさんあります。 @Outputを使用して、親コンポーネントに関数を送出します。または、サービスとObservableを使用します。

ここでは、サービスの使用時に尋ねたサンプルを示します。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

// test.service.ts 
import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/subject'; 

@Injectable() 
export class TestService { 

    // Source 
    private list = new Subject<Object[]>(); 

    // Observable Stream 
    public list$ = this.list.asObservable(); 

    constructor() {} 

    updateList(data) { 
    this.list.next(data); 
    } 
} 

// parent.component.ts 
import { Component, OnInit } from '@angular/core'; 
import { TestService } from 'services/test.service.ts'; 

@Component({ 
    selector: 'parent-name', 
    templateUrl: 'parent.component.html', 
    providers: [] 
}) 

export class ParentComponent implements OnInit { 
    list; 

    constructor(
    private testService: TestService 
) { 
    testService.list$.subscribe(data => { 
     this.list = data; 
    }); 
    } 

    ngOnInit() { } 
} 

// child.component.ts 
import { Component, OnInit } from '@angular/core'; 
import { TestService } from 'services/test.service.ts'; 

@Component({ 
    selector: 'child-name', 
    templateUrl: 'child.component.html' 
}) 

export class ChilComponent implements OnInit { 
    list; 

    constructor(
    private testService: TestService 
) { } 

    ngOnInit() { } 

    update(){ 
    this.testService.updateList(list); 
    } 
} 
+0

感謝。私は@Outputを使ってメインコンポーネントの関数を出力し、それはうまくいった。サービスとObservableを使ってあなたの事例を共有してください。私は角度がないので、それについてはあまり考えていない。 –

関連する問題