передать данные в другой компонент в угловых 6

Question

Я создаю свое веб-приложение с использованием angular 6. У меня есть какой-то общий компонент, общий для всех маршрутов. Например, у меня есть компонент фильтра, который является общим для всего маршрута. Теперь, когда пользователь выбирает фильтр, нажмите «Найти», и данные этого фильтра должны быть переданы другому компоненту на том же маршруте, а затем должен отображаться результат. Структура приложения PFB my angular: 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>

Поэтому, когда пользователь нажимает кнопку, я хочу передать некоторую переменную компоненту панели мониторинга. Я также попытался использовать служебный компонент и подписать его на переменную dgboard ngOnInit (), но он не работает.

Answer 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 и создайте для него объект, а затем:

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

Примечание: key_name для хранения и получения должен быть одинаковым.надеюсь, это поможет.

Answer 2

Создайте сервис и предоставьте его в качестве ссылки на родительском уровне, и по щелчку кнопки передайте данные фильтра в функцию с наблюдаемым типом возврата и в компоненте подпишитесь на результат функции. Поскольку жизненный цикл ngOnInit инициализируется только в начале загрузки страницы, он может не сильно помочь.