Angular 6 Search bar 和 Result 两个不同的不相关组件

Question

我有两个组件1. Header Component 2. 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);
          }
        )
    }

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

更新我已经编写了 BehaviorSubject 服务来解决这个问题

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);
  }

我的Result.component.ts

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

Answer 1

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

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

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

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

在服务中，我们创建了一个私有的 BehaviorSubject 来保存消息的当前值。 我们定义了一个 currentMessage 变量来处理这个数据流，作为组件将使用的 observable。 最后，我们创建调用 BehaviorSubject 的 next 函数来改变它的值。

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

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

 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") } }