Question

我有3个组成部分： 1.标头组件； 2.搜索比较； 3. Home Comp;

Home Comp包含我的用户列表，Header Comp包含Search Comp，所以我想将我的searchString传递给Head Comp之间的Home Comp。

我一直在寻找类似事件发射器的东西，但无法将其应用于我的代码。

Home Comp：

<div class=" container-fluid">
        /.../
    <app-search></app-search>
 </div>

Search Comp：

<div class="row no-margin">

        <div class="row no-margin row-padding">
            <div class="col-md-offset-4 col-md-4 col-sm-12 searchbar">
                <input type="text" class="ricerca ng-valid ng-isolate-scope ng-touched ng-dirty ng-valid-parse"
                       [placeholder]="placeHolder"
                       [(ngModel)]="searchname" (keypress)="searchBarKey($event)">
                <div class="searchIco"></div>
            </div>
        </div>
</div>

Home Comp：

<div class="list">
    <cdk-virtual-scroll-viewport>
        <div class="d-flex flex-wrap justify-content-center">

            <div *cdkVirtualFor="let user of data" | ADD SOMETHING>

                <div class="box_dipendenti">
                    <div class="float_l b_max_width">
                        <h5 class="cursorHover" (click)="showModal(user)">
                            <span>{{user.firstName}} </span>
                            <span>{{user.lastName}}</span>
                        </h5>
                 </div>
            </div>
        </div>
    </cdk-virtual-scroll-viewport>
</div>

此刻我没有添加任何方法，因为我不知道要放什么。

有人有什么建议吗？

Answer 1

因此，根据组件层次结构，有几种方法可以在组件之间传递数据。我的建议是通读这篇文章：

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

它涵盖了在组件之间共享数据的4种主要方法，因此，如果您不确定从哪里开始，那么这就是我要开始的地方。为了使您滚动，将搜索组件中输入框的值传递给home组件将需要共享服务，该服务在发布的链接中涵盖。

我希望这会有所帮助！

如何以> 2的角度将数据从SearchComponent获取到我的ListComponent？

1 个答案: