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

Question

我有两个组成部分1. Header Component2. Result Component在标题中，我有一个搜索栏，它带有单击的按钮，我希望将结果填充到结果页面上。

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

标头和结果组件都不相关，因此如果可以传递值，我可以使用@input或output纠正我吗？

main.component.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,
      }
    });
  }

我将搜索框中的所有结果显示在结果页面上，因此我正在使用路由器进行导航。结果component.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);
          }
        )
    }

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

Answer 1

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

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

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

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

在服务中，我们创建一个私有的BehaviorSubject，它将保存消息的当前值。我们将currentMessage变量定义为可观察到的数据流，以供组件使用。最后，我们创建函数，然后在BehaviorSubject上调用以更改其值。

父，子和同级组件均接受相同的处理。我们将DataService注入构造函数中，然后订阅可观察的currentMessage并将其值设置为与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")
  }

}