Question

我有一个angular2应用程序，我有这样的结构

身体成分

- 身体顶部组件

- 身体底部组件

我有一个输入框＆＃34; 过滤数据＆＃34;在顶部组件中，以及在body bottom组件和管道中的数据表＆＃34; filterData ＆＃34;

body top component ::

<input [(ngModel)]="searchInputBox" type="text" name="searchInputBox" >

body bottom component ::

<tr *ngFor="let d of data | filterData:searchInputBox"><td>{{d.name}}</td></tr>

问题是，如果我将输入框和数据表放在两个不同的组件中，它不会过滤数据，但如果我放入一个组件，它就能正常工作。

如何将输入值从一个组件传递到另一个组件以在管道中使用？

Answer 1

Angular 2中的组件，与AngularJS中的控制器非常相似，它们定义了自己的“范围”，用于完成工作。在AngularJS中，有一些技巧可以从父级范围访问数据，而Angular 2则不再是这种情况。

正如@ mohammad-shahid所提到的，您可以使用服务来保存您的数据，因为这是一个单例对象，并且在您的应用程序中将是相同的，但在我看来，这有点太多了你需要什么。

相反，您应该使用更像Angular 2的方法，并使用rxjs库和全局状态来使用Observable。

然后，你会有这样的结构：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class GlobalState {

    private _data = new Subject<Object>();
    private _dataStream$ = this._data.asObservable();

    private _subscriptions: Map<string, Array<Function>> = new Map<string, Array<Function>>();

    constructor() {
        this._dataStream$.subscribe((data) => this._onEvent(data));
    }

    notifyDataChanged(event, value) {

        let current = this._data[event];
        if (current !== value) {
            this._data[event] = value;

            this._data.next({
                event: event,
                data: this._data[event]
            });
        }
    }

    subscribe(event: string, callback: Function) {
        let subscribers = this._subscriptions.get(event) || [];
        subscribers.push(callback);

        this._subscriptions.set(event, subscribers);
    }

    _onEvent(data: any) {
        let subscribers = this._subscriptions.get(data['event']) || [];

        subscribers.forEach((callback) => {
            callback.call(null, data['data']);
        });
    }
}

在根组件中提供GlobalState，以便您可以在任何地方访问它。

然后你有TopComponent

@Component(...)
TopComponent implements NgOninit {

    constructor (private _state: GlobalState) { }

    ngOnInit () {
        this._state.notifyDataChanged('myEvent', this.searchArg);
    }
}

在BottomComponent中

@Component(...)
TopComponent implements NgOninit {

    constructor (private _state: GlobalState) { }

    ngOnInit () {
        this._state.subscribe('myEvent', (searchArg) => { // use it })
    }
}

现在，当TopComponent将推送全局状态的数据时，BottomComponent将做出相应的反应。

Answer 2

解决组件之间共享状态问题的最常用方法之一是使用Service来保存数据并将其注入到各种组件中。

The Angular cookbook provides an example of this approach。只需向下滚动到标题为Parent and children communicate via a service

的部分

Angular2过滤数据使用管道的另一个组件的输入框

2 个答案: