角度搜索更好的方法

Question

让我们假设，我有一个类似

的组件层次结构

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

此布局包含一个“左侧栏”，其中包含一个表单，用于根据姓名，年龄，性别等输入字段来搜索“学生”。

包含搜索结果组件的右侧需要显示此更新的结果集。

我不明白，在这种情况下如何将结果数据传递给“搜索结果”？

需要输入  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
     }
   });
}