상위 - 하위 관계 또는 서비스가없는 구성 요소 상호 작용

Question

두 구성 요소가 있는데 하나는 검색 양식이있는 옆 구성 요소이고 두 번째 구성 요소는 주입 된 서비스를 통해 목록보기에 데이터를 표시합니다. 이제 그들은 중첩되지 않고 서로 독립적이며 첫 번째 구성 요소 (검색 양식)의 기준에 따라 두 번째 구성 요소에서 데이터를 필터링 할 수있는 방법을 찾으려고합니다. 그들이 중첩 된 경우 @ input/@ output 속성 바인딩을 사용할 수 있지만 중첩되지 않을 때 한 구성 요소에서 다른 구성 요소로 데이터를 전달하는 방법을 알고 있습니다. 두 가지 구성 요소간에 데이터를 공유하는 데 서비스를 사용할 수는 있지만이 시나리오에서 어떻게 작동하는지 또는 건축가를 변경하고 부모 - 자식 구성 요소 구조를 만들어야하는지 확실하지 않습니다.

Answer 1

어떤 일이 같은 : 당신이 도움을받을 수 있도록 서비스가이 작업을 수행 할 수 있습니다

<search-box #searchBox></search-box> 
<search-result [text]="searchBox.text"></search-result> 

@Component({ 
    selector: "search-box", 
    template: "<input [(ngModel)]="text">" 
}) 
export class SearchBox { 
    text: string; 
} 

@Component({ 
    selector: "search-result", 
    template: "<ul><li *ngFor=" ....."/></ul>" 
}) 
export class SearchResult { 
    @Input() text; 

    ... 
}