如何将数据从一个子组件传递到父组件和其他子组件？

Question

我把我的页面分成以下格式。我有一个父组件和多个子组件。第一个是过滤器组件。因此，当我在此组件中进行提交时，其结果将在所有其他子组件以及父组件中实现。

我认为我从 child-A 接收到父组件的日期将其传递给 child-B 和 child-C 但我无法修复它。

我在这里工作： https://stackblitz.com/edit/angular-fqp5px

谁能帮我解决这个问题？

谢谢。

Answer 1

您可以只创建简单的服务并将值传递给 Subject 对象。并在您想要使用它的其他组件中订阅该对象。

例如服务：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
import { Subject } from 'rxjs';

@Injectable()
export class dataService {
    //here i am giving example for string. You can use any kind of object(class)
    private querySource = new Subject<string>();
    query$ = this.querySource.asObservable();

    functionname(value: string){
               this.querySource.next(value);
     }
}

现在订阅此服务并在提交按钮上调用 functionName 函数。并且更改将在您希望在父组件或任何其他子组件中的任何位置订阅。

参考 this

如何将数据从一个子组件传递到父组件和其他子组件？

How to pass data from one child to parent and other child components?

angular5