将数据绑定到父级

Question

我有一个具有以下结构的angular 5项目：

app.component.html

<app-header></app-header>
<app-list-view></app-list-view>
<app-footer></app-footer>

在我的<app-header>组件中，我有一个<app-search></app-search>组件：

<div id="headerContent">
    <div id="logo">
        <img src="../../../assets/images/logo.png"/>
    </div>

    <app-search></app-search>
</div>

在这个search.component.html中我有：

<div id="searchContent">
  <input [(ngModel)]="queryString" type="text" placeholder="Bijv. PHP developer, AngularJs"/>
  <button>Zoeken</button>
</div>

我想将输入字段中的数据从app-search组件传递到app-list-view组件。

最好的方法是什么？

Answer 1

实现非嵌套组件（也称为父子组件）之间通信的最简单方法是使用服务。一个有用的例子是R package that delivers executables residing in /inst中的on。