각도 4의 검색 결과를 표시하는 방법

Question

필자는 필 터 디렉토리 목록과 검색 버튼에 2 개의 필드를 사용할 수있는 필터 구성 요소를 가지고 있습니다.

필터링 된 결과를 모든 디렉토리 목록이 표시된 주요 구성 요소에 표시하려고합니다.

실제로 모두 잘 작동하고 있습니다. 검색 버튼을 클릭하면 filter.component.ts 파일에서 검색 기능을 실행하고 api에서 결과를 가져 와서 콘솔에 결과를 표시합니다. 하지만 필터링 된 목록을 표시해야하는 주요 구성 요소에 결과를 전달할 수 없습니다.

Answer 1

코드 샘플이 표시되지 않습니다. 이미 가져온 데이터를 단순히 필터링하고 싶으시기 바랍니다. 다른 데이터 세트를 가져와야하는 경우 해당 데이터를 상위 구성 요소로 다시 보내야합니다.

이렇게하는 방법에는 여러 가지가 있습니다. @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); 
    } 
}