下面是在不同视图中添加搜索栏和结果的解决方案，使用Angular 7。

首先，创建一个名为search.component.ts的组件，该组件包含搜索栏和结果。在该组件的HTML模板中，可以使用Angular的双向绑定来获取输入的搜索关键字，并在搜索按钮点击时触发搜索功能。

Search


  
Search Results:
  

    
{{ result }}
  

在组件的TypeScript文件中，定义searchKeyword和searchResults两个变量，并在点击搜索按钮时执行搜索逻辑。这里假设搜索功能通过调用一个名为searchService的服务来实现。

// search.component.ts
import { Component } from '@angular/core';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  searchKeyword: string;
  searchResults: string[];

  constructor(private searchService: SearchService) {}

  search(): void {
    this.searchResults = this.searchService.search(this.searchKeyword);
  }
}

接下来，创建一个名为search.service.ts的服务，用于处理搜索逻辑。在该服务中，可以定义一个简单的搜索方法，根据搜索关键字返回一个模拟的搜索结果数组。

// search.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SearchService {
  search(keyword: string): string[] {
    // Simulated search logic
    return ['Result 1', 'Result 2', 'Result 3'];
  }
}

最后，在需要使用搜索组件的视图中，可以通过添加标签来使用搜索组件。

Search Example

要使上述代码正常工作，还需要在app.module.ts中将SearchComponent和SearchService添加到模块的declarations和providers中。

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { SearchComponent } from './search.component';
import { SearchService } from './search.service';

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [SearchService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样，就可以在不同视图中使用搜索栏和结果了。每当用户在搜索栏中输入关键字并点击搜索按钮时，将触发搜索逻辑，并显示搜索结果。