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

Question

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

我认为我从子 A 收到父组件的日期将其传递给子 B 和子 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