Angular2/5点击按钮跳转新组件展示MLAB搜索结果的疑问

嘿，你已经把前后端数据打通的基础工作搞定了，接下来要解决的就是全局导航栏触发搜索后，跳转到新组件并展示结果的问题对吧？我给你梳理一套可行的方案，分步骤来：

步骤1：配置路由，注册搜索结果组件 #

首先得让Angular知道跳转到哪个页面，先创建你的搜索结果组件（比如SearchResultsComponent），然后在app-routing.module.ts里配置路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SearchResultsComponent } from './search-results/search-results.component';
// 导入你其他的组件路由...

const routes: Routes = [
  // 你的其他路由配置
  { path: 'search-results', component: SearchResultsComponent } // 新增这个路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：创建全局数据共享服务 #

因为导航栏（app.component）是全局存在的，搜索结果需要传递给新组件，用Angular服务是最稳妥的方式——服务是单例的，能在任意组件间共享数据。

创建一个SearchService：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 根注入，确保全局单例
})
export class SearchService {
  // 用BehaviorSubject保存搜索结果，初始值设为空数组即可
  private searchResults$ = new BehaviorSubject<any[]>([]);
  // 暴露可观察对象，让其他组件订阅
  currentResults = this.searchResults$.asObservable();

  constructor() { }

  // 更新搜索结果的方法，供app.component调用
  setSearchResults(results: any[]) {
    this.searchResults$.next(results);
  }
}

步骤3：修改导航栏的搜索逻辑 #

在app.component里，发起GET请求拿到数据后，先把数据传给共享服务，再通过Router跳转到搜索结果页面：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { SearchService } from './search.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private http: HttpClient,
    private router: Router,
    private searchService: SearchService
  ) {}

  handleSearch() {
    // 替换成你的Express接口地址
    this.http.get('http://localhost:3000/api/mlab-data').subscribe((res: any) => {
      // 把结果存入共享服务
      this.searchService.setSearchResults(res);
      // 跳转到搜索结果页面
      this.router.navigate(['/search-results']);
    });
  }
}

对应的app.component.html里的按钮绑定点击事件：

<!-- 你的导航栏结构 -->
<button (click)="handleSearch()">获取MLAB数据并查看结果</button>
<!-- 确保路由出口在导航栏下方，这样所有页面都能看到导航栏 -->
<router-outlet></router-outlet>

步骤4：在搜索结果组件中接收并展示数据 #

最后在SearchResultsComponent里订阅共享服务的数据，渲染到页面上：

import { Component, OnInit } from '@angular/core';
import { SearchService } from '../search.service';

@Component({
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.css']
})
export class SearchResultsComponent implements OnInit {
  searchResults: any[] = [];

  constructor(private searchService: SearchService) { }

  ngOnInit(): void {
    // 订阅服务中的数据变化
    this.searchService.currentResults.subscribe(results => {
      this.searchResults = results;
    });
  }
}

对应的search-results.component.html模板：

<h3>MLAB搜索结果</h3>
<div class="result-item" *ngFor="let item of searchResults">
  <!-- 这里根据你的数据结构渲染内容，比如item.title、item.content等 -->
  <p>{{ item | json }}</p>
</div>

额外注意事项 #

• 确保你已经在AppModule中导入了HttpClientModule和RouterModule，不然请求和路由都没法工作；
• 如果前后端端口不同，记得在Express里配置CORS（比如用cors中间件），避免跨域错误；
• 如果搜索结果可能为空，可以在模板里加个判断，比如<p *ngIf="searchResults.length === 0">暂无结果</p>。

内容的提问来源于stack exchange，提问作者user9309783