沒有父子關系或服務的組件交互

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;

    ...
}