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;

    ...
}

没有父子关系或服务的组件交互

1 个答案: