Как компонент Search Popup взаимодействует с двумя другими компонентами в angular

Question

Поиск проекта - я хочу создать новый проект поиска в angular.

Требование заключается в том, что когда я нажимаю кнопку поиска на другом сайте, он переходит на страницу поиска в нашем проекте и показывает поиск всплывающего окна со страницы поиска. Когда я нажимаю на кнопку поиска, во всплывающем окне отображаются результаты поиска под этой кнопкой поиска. Когда я выбираю строку из результатов поиска, мне нужно скрыть это всплывающее окно поиска и показать подробности этой строки на другой странице 'SearchDetails'. когда мы нажимаем кнопку поиска на странице SearchDetails, мне снова приходится показывать то же самое всплывающее окно, которое мы отображали ранее.

Сначала я добавил верхний и нижний колонтитулы в appcomponent. Затем я создал поисковый всплывающий компонент и включил его в начальную страницу поиска.

Затем я создал компонент SearchDetails, чтобы показать подробности. сюда также включен поисковый компонент.

Я сомневаюсь, что всплывающий компонент поиска взаимодействует с компонентами searchcircular и SearchDetails.

Answer 1

Если вы используете mat-dialog для всплывающего окна, то вы должны использовать что-то вроде этого для popup:

constructor(public dialog: MatDialog){ }

const dialogRef = this.dialog.open(popUpComponent, {
  width: '40%'
});

Добавьте это:

dialogRef.afterClosed().subscribe(result => {
 // here you can get data from other component
});

И в вашем два других компонента, вы бы использовали dialogRef.close (). Теперь отправьте некоторые данные для связи в close ():

constructor(public dialogRef: MatDialogRef<searchCircularcomponent>){}

this.dialogRef.close('send your data here')