Угловой поиск лучше подходит

Question

Предположим, что у меня есть иерархия компонентов, подобная

<app-component> 
<header></header>
<sidebar>
    <form-component>
</sidebar>
<sidebar />
    <breadcrum>
    <search-result />
</app-component>

Этот макет содержит «левую боковую панель», которая содержит форму для поиска «учеников» по ​​полям ввода, таким как Имя, возраст, пол.

Правая сторона, которая содержит компонент результатов поиска, должна показывать этот обновленный набор результатов.

Я не могу понять, как можно в этом случае передать данные результата в «search-result»?

нужны входы для 1. правильно ли размещен компонент приложения? 2. как передать данные о результатах учащихся между этими компонентами, чтобы показать результат?

PS: я знаю @Input () & @Output, но немного сбит с толку, как я могу использовать для предоставления данных результатов компоненту "Результат поиска"?

Answer 1

Вы можете реализовать это, используя архитектуру обмена сообщениями. Всякий раз, когда происходит изменение в боковой панели (это может быть нажатие клавиши / нажатие кнопки поиска), сообщите другому компоненту об этом изменении. Это может быть реализовано, как показано ниже:

Имейте обслуживание как показано ниже:

DataService.ts:

@Injectable()
export class DataService{
private subject = new Subject<any>();
sendMessage(message: any) {
    this.subject.next({ obj: message });
}

clearMessage() {
    this.subject.next();
}

getMessage(): Observable<any> {
    return this.subject.asObservable();
}
}

sidebar.component.ts:

  this.dataservice.sendMessage(send the object that you would require in the other 
  component)

searchresult.component.ts

messagesubscription: Subscription;
constructor(private dataservice: DataService) {
  this.messagesubscription = this.dataservice.getMessage().subscribe((message) 
  => {
     if (message.obj) {
        // access the object here
     }
   });
}