Angular 6搜索栏和结果两个不同的不相关组件

Question

>我有两个组件1. Header Component2. Result Component在标题中，我有一个搜索栏，单击时有一个按钮，我希望结果填充在结果页面上。

第二个问题是，一旦我是结果页面，如果我在标题组件搜索中输入搜索值，它不应该重新加载页面

标头和结果组件都不相关，因此我可以使用@input或output是否有办法让我传递值来纠正我？

主组件.html

<app-header *ngIf="auth.isLoggednIn()"></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>

Header.component.html

<div class="container">
<ul>
<li routerLinkActive="active"><a routerLink="/statupdate">Status Update</a></li>
<li routerLinkActive="active"><a routerLink="/add">Add New</a></li>
<li routerLinkActive="active"><a routerLink="/projects">Opportunity</a></li>
</ul>
<form class="form-inline" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
<input class="form-control mr-sm-2" type="search" placeholder="ClientName" aria-label="Search"
formControlName="searchText">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>

Header.component.ts

this.router.navigate(['search'], {
queryParams: {
search: this.searchForm.value.searchText,
}
});
}

我有搜索框中的所有结果显示在结果页面上，所以我使用路由器进行导航。结果组件.ts

constructor(private route: ActivatedRoute,public projectService: ProjectService) { }
ngOnInit() {
this.projectService.list(this.route.snapshot.queryParamMap.get('search')).subscribe(
(resp) => {
this.list = resp;
},(err) => {
console.log(err);
}
)
}

是否可以在不重新加载页面的情况下填充数据？我找不到这方面的例子

更新我已经编写了行为主题服务来解决此问题

private messageSource = new BehaviorSubject(<any>[]);
currentMessage = this.messageSource.asObservable();
constructor(public httpClient: HttpService) { }
changeMessage(message) {
this.httpClient.get('project?clientName=' + message)
.subscribe(
(resp) => {
this.messageSource.next(resp);
}
)
}

但想知道如果可能的话，我是否可以像这样改进这种编码

changeMessage(message) {
let temp = this.httpClient.get('project?clientName=' + message)
this.messageSource.next(temp);
}

myResult.component.ts

ngOnInit() {
this.searchService.currentMessage.subscribe(
(message) => { console.log(message); this.message = message }, (err) => { console.log(err) })
}

Answer 1

不相关的组件：与服务共享数据

在缺少直接连接的组件(例如兄弟姐妹、孙子等(之间传递数据时，您应该使用共享服务。当你有应该同步的数据时，我发现RxJS行为主体在这种情况下非常有用。

您也可以使用常规的RxJS主题通过服务共享数据，但这就是为什么我更喜欢BehaviorSubject。

1. 它将始终返回订阅时的当前值 - 无需 呼叫下一个
2. 它有一个getValue((函数来提取最后一个值作为原始数据。
3. 它确保组件始终接收最新数据。

在服务中，我们创建一个私有的行为主体，它将保存消息的当前值。我们将一个 currentMessage 变量处理此数据流作为组件将使用的可观察量。最后，我们创建函数，该函数调用 BehaviorSubject 的下一步来更改其值。

父组件、子组件和兄弟姐妹组件都接受相同的处理。我们在构造函数中注入 DataService，然后订阅 currentMessage observable，并将其值设置为等于消息变量。

现在，如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。 当此函数执行新数据时，它会自动广播到所有其他组件。

data.service.ts
------------------------
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
one.component.ts
-----------------------------
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
two.component.ts
--------------------------------------------
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}