将数据传递给角度 6 中的不同组件答案

【问题标题】：pass data to different component in angular 6将数据传递给角度 6 中的不同组件
【发布时间】：2019-02-11 14:15:01
【问题描述】：

我正在使用 Angular 6 构建我的 Web 应用程序。我有一些在所有路由上都通用的通用组件。例如，我有一个在所有路由上通用的过滤器组件。现在，当用户选择过滤器时，单击查找此过滤器数据应传递到同一路由上的不同组件，然后应显示结果。 PFB我的角度的应用程序结构： App.component.html：

<filter (messageToDash)="receiveMessage($event)"></filter>
<router-outlet></router-outlet>

对于破折号路线，我有破折号组件。 PFB 是 dash.component.html 的代码：

<dashboard></dashboard>

Filter.component.html

<button (click)="somemethod()"></button>

因此，当用户单击按钮时，我想将一些变量传递给仪表板组件。我还尝试使用服务组件并将其订阅到仪表板的 ngOnInit() 变量中，但它不起作用。

【问题讨论】：

你听说过outputs 吗？它们允许组件向其父级发送事件。
但我想将数据发送到将由呈现的组件
所以仪表板在路由器插座中，但过滤器不在？
是的。我已经这样做了，因此过滤器将显示在所有路线上
嗨@user2560457 使用共享服务stackoverflow.com/questions/40468172/…

标签： javascript angular

【解决方案1】：

几个月前我也遇到过同样的问题，当时我得到的最佳解决方案是使用LocalStorageService 例如：

import { LocalStorageService } from 'ngx-webstorage';

constructor(private session: LocalStorageService)
{
 //works at the begining of the module before OnInit 
}

some_function()
{
    this.session.store('key_name',yourData);
}

现在在另一个组件中导入 LocalStorageService 并为其创建一个 obj 然后：

some_function()
{
    this.your_variable = this.session.retrieve('key_name');
}

注意：存储和检索的key_name 必须相同。希望这会有所帮助。

【讨论】：

我也这么想。但是我将如何从过滤器组件刷新仪表板组件的视图。
您应该在组件和 html 文件中使用相同的变量。与[(ngModel)]="name"。这将根据您提供的数据更新视图上的数据。

【解决方案2】：

创建一个服务并在父级别将其作为参考，并在按钮的（单击）上将过滤器数据传递给返回类型可观察的函数，并在组件中订阅函数的结果。由于 ngOnInit 生命周期仅在页面加载开始时才被初始化，因此可能没有太大帮助。

【讨论】：

感谢您的回复。如果用户更改过滤器，我还想在每次点击时更改数据。